This is where CSS3 comes in, we now can create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3.
Neat and modern main section with CSS3
Today we look at the most basic elements of a page such as blocks and forms. I think that if we make all the blocks with the same styles – it would be boring, so (for a change), I prepared four types of blocks with custom headers and footers. And, as a demonstration of the form design – I made the contact form. Now, this is complete design of a single page.
CSS: Responsive Navigation Menu
It works on all mobile and desktop browsers including Internet Explorer! This trick is more useful on navigation with a lot of links like the screenshot below. You can condense all the buttons into an elegant dropdown.
Animenu – A responsive dropdown navigation made with SASS
Note: The browser support for this dropdown navigation is IE8+, so it uses the new box model triggered by
box-sizing: border-box and the shortest clearfix ever.
How to Create Bounce Effect with CSS3 Animation
Today, we are going to doing an experiment with CSS3 Animation, we will try to create a “notification bar” with bounce effect. The basic idea on how the bounce will run is that when the object drops on the surface the first time, it bounces of the surface and will reach its highest level. Then it gradually reaches a lower point with every subsequent bounce, until the object stops bouncing.
An experiment with Responsive Background-images
A neat trick to make it possible for background-images to ‘fluidly’ resize keeping the same aspect ratio and without leaving space below or chopping off the image. But, how to serve different responsive background-images by defining them in my various media-queries? So far I only saw examples of this technique in headers of websites, but the different background-images weren’t responsive nor Retina-friendly ..
CSS3 patterned buttons
Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you’ll see what I’ve been working on lately. As you may have expected, no images used here. Instead, an base64 string is used to create the patterned effect.
Colorful CSS3 Animated Navigation Menu
In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font. An icon font is, as the name implies, a font which maps characters to icons instead of letters. This means that you get pretty vector icons in every browser which supports HTML5 custom fonts (which is practically all of them).
To add icons to elements, you only need to assign a class name and the icon will be added with a
:before element by the font awesome stylesheet.
Using CSS3 Filters to Enhance your Transitions
CSS3 Filters are a pretty exciting prospect for us Web Designers as they make effects that we typically associate with Photoshop, possible to apply in the browser with ease. The basic filters as listed in the W3C Draft are as follows:
Note: Support is very limited at the time of writing, with Chrome currently the only browser with support for CSS3 filters, so anything other than experimental usage should be done with caution.
Create a stunning menu in CSS3
The navigation of a website is one of the most fundamental aspects to make or break a user’s experience. Instead of loading your menu down with individual images or sprites, why not do the entire thing in CSS3? With animations, shadows, rounded corners and more, elements can be easily styled, and still weigh less than ever before.
3D Book Showcase
Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining.
Create a 3D Book Animation with CSS
Doing something interesting with the image of the book itself on the website. With the introduction of transforms in CSS, we can now replicate 3D objects. The 3D book consists of two elements, the spine and the cover. What we’re basically doing is rotating
.book-spine, using CSS transforms, to the position it would be as if it were a real book and then, on hover, we’re rotating
.book to reveal the spine and to show off the book in all its 3D glory.
Bring Your Forms Up to Date With CSS3 and HTML5 Validation
Let’s look at how to create a functional form which validates users’ data, client-side. With that done, we’ll cover prettying it up using CSS, including some CSS3! We want to make sure the user is entering the information correctly. To accomplish this, we will use HTML5′s new client-side validation techniques.
HTML5 validation is coming closer to replacing client-side validation in helping users properly fill out their online forms. However, HTML5 validation still does not replace server-side validation. For the time being, it’s best to use both methods when handling user-submitted information.
CSS3 tucked corners
For this alternative CSS3 tucked corners effect, I used the beveled corners technique by Lea Verou, a technique you’ve seen implemented before for my CSS3 tabs with beveled corners. There’s nothing to change or to improve here. At first sight you may think there’s some extra markup in there but we’ll actually need everything below in order to be able to create four corners using CSS pseudo-elements.