In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes, and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into the box to represent the page on the navigation.
View the demo to see this effect.
In this tutorial we are going to create a flip board effect by using CSS, there are 2 effects we can create one the hover event we are going to have one board flip on the horizontal and another board which will flip on the vertical.
This effect can be used to hide content from the user until they hover over the board this will then display the hidden board.
View the demo to see the effect.
In this tutorial we are going to recreate a slide out search box just like what you will find on Github.
What's different about this search box is that it will start with a small width and then when the user clicks into it to write their search it uses CSS transition to change the width of the search box.
The whole process of this is quite simple using basic CSS transitions but I think the effect is done really well.
Continue reading
Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not make your site look different by styling your checkboxes, you could even make them look nothing like checkboxes.
In this tutorial we are going to create 5 different checkboxes which you can use on your website.
View the demo to see the checkboxes we are going to create.
To start off we need to add one piece of CSS that each of the following checkboxes will need. We need to hide all the original checkboxes as we will be changing the way they look. To do this add the following into your CSS file.
/**
* Start by hiding the checkboxes
*/
input[type=checkbox] {
visibility: hidden;
}A polaroid picture is an iconic image of how pictures used to be. It is strange to see them on a computer but they are also a great way to display images. The images are placed on a white background with a caption underneath the images.
In this tutorial we are going to display images in a polaroid style using just CSS.
View the demo to see what we are going to create.
To start off we are going to create the html for the polaroid gallery, all we are going to do for this is display images wrapped in a anchor tag link.
Continue reading
I'm a big fan of some of the experimental CSS properties that the browsers vendors are developing. In previous tutorials I have looked at some of the new features which I think are really useful.
In this tutorial we are going to look at a great new features called CSS filters. This is a new feature that can be used on both HTML elements and images, but I think it's best used on images and can create nice effects on image galleries.
Using just CSS you are able to create all these effects on images.
When it comes to designing a website it's really handy to use a grid system to help. Using a grid system allows you to easily space out and line up different content on the page. A grid system makes it really easy for your visitors to follow the flow of content.
For the developer they are great, you don't need to work out any maths when changing the layout of the page. If you want to increase the width of the whole page you can do it in one place and everything else increases inside it.
There are loads of already created CSS grid frameworks out there that already do all the maths for you. Some even give you a form to customise how large you want each grid, how large you want the margin and it will create the entire CSS grid for you.
Here is a list of some good CSS grid frameworks. Take your pick try one out.
Every website now has social network share buttons on their site, if you don't have them then you really should do. They're a great way to give your visitors easy access to share your content with their friends and followers.
The thing with social network share buttons is that they all look the same on every website, you can take this two ways. It's either a good thing because people will recognise them and understand how to use them or it's a bad thing because now your website looks the same as every other website on the internet.
In this tutorial we are going to create a share button which uses CSS animation to display the links to share the current page on Facebook, Twitter, Google Plus and Pinterest.
First we are going to start off creating the HTML which will display some text such as Share This Page. Then when we hover over this text we want to use CSS animation to display the share buttons.
View the demo to see what we are going to create.
With HTML5 it comes with built in features to perform form validation, one of the common attributes to use is the required attribute, this allows you to set which form inputs are required to have a value before progressing with the form.
Along with the :required pseudo class you have 2 other classes :valid and :invalid. These two pseudo classes are used to show which inputs have validated correctly. If the input field has validated correctly then the :valid pseudo class will be activated, if the form field is invalid the :invalid pseudo class will be activated.
The pseudo-class you need to use is :invalid.
Continue reading
Twitter bootstrap is a front-end framework designed to allow you to have a framework to start all your web projects on. The framework comes with so many features from grids, responsive design, typography, forms, tables, buttons, navigation, labels, alerts and progress bars just to name a few.
Twitter bootstrap is a github projects and is design for the web community by the web community. If you have something to add to it or want to download it you can see the project on github.
In this post we are going to look at one of my favourite features of the bootstrap...alert boxes. These are perfect to display a small message on the screen for different scenarios.
There are a few alert boxes that come with the framework these are:
All of the alert boxes in the Twitter bootstrap will use the alert class. This sets the styling which all the alert boxes will use but for the other boxes we will just change the colours to match the scenario.
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
color: #c09853;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert-heading {
color: inherit;
}
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: 18px;
}The HTML to call these are very simple just add the CSS class to a outer div or paragraph tag.
<div class="alert">Example of an alert box.</div>The success alert box will be used when the user successfully completes a task all the CSS will do is override the colours of the standard alert box.
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}When you use this CSS class you need to use both the alert CSS and the alert-success CSS.
<div class="alert alert-success">Example of the successful alert box</div>The error alert box works the same as the success box it is just used to change the colour of the background and text.
.alert-danger,
.alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}Again you need to use both the alert CSS and the alert-error CSS.
<div class="alert alert-error">Example of the error alert box</div>The last style is the information style, used to highlight a message to the user by just using the CSS class alert-info.
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}<div class="alert alert-info">Example of the information alert box</div>Along with the different scenario styling Twitter bootstrap also gives you additional CSS classes to further style the alert boxes.
Adding a class of alert-block you increase the padding of the box.
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}The next styling will reduce the margins on the paragraph tags inside the alert-block.
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}The HTML to add additional padding can be used by adding the alert-block CSS class to one of the alert boxes.
<div class="alert alert-information alert-block">
Example of the information alert box
</div>That's all the alert boxes you currently get with the Twitter bootstrap, of course there are loads of other alert box types you would want to add so why not contribute to the project and add new ones.