Today we are showcasing some of best tutorials and techniques that will help you create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3. All with absolutely NO JAVASCRIPT. For the most part, the techniques we have highlighted below, can be used for everyday use, others probably not. Please do check browser compatibility when implementing any of these techniques.
CSS3 Image Galleries, Slideshows and Image Effects
Sliding Image Panels with CSS3
In this tutorial you’ll be shown how to create some neat sliding image panels. The idea is to use background images for the panels and animate them when clicking on a label.
Sliding Image Panels with CSS3 →
Fullscreen Background Image Slideshow with CSS3
You’ll create a CSS-only fullscreen background image slideshow with this tutorial. You’ll learn how to create different image transitions and also make an animated title appear.
Fullscreen Background Image Slideshow with CSS3 →
CSS3 Lightbox
With this tut you will be shown how to create a lightbox effect using only CSS. You will have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, you will learn how to make the larger image appear in a sleek and fancy way.
CSS3 Image Styles
In this tutorial you will be shown how much you can do with background-image. You’ll be shown how to use box-shadow, border-radius and transition to create various image styles.
CSS3 Menus, Navigation & Buttons
The Apple.com Menu Created Using Only CSS3
The Apple.com Menu Created Using Only CSS3 →
Making a CSS3 Animated Menu
In this short tutorial, you will be using the power of CSS3 effects and transitions, to build an animated menu, using some neat features such as the :target pseudo selector and :after elements.
CSS3 Menu Navigation Effect
Animated Buttons with CSS3
The idea of this tutorial is to create some animated link elements with different styles, hover effects and active states.
Creative CSS3 Animation Menus
With a simple composition of elements, an icon, a main title and a secondary title, you will learn how to create an animated menu on hover using only CSS transitions and animations.
Creative CSS3 Animation Menus →
Circle Navigation Effect with CSS3
In this tutorial you will be shown how to create a beautiful hover effect for an image-based navigation using CSS3.
Circle Navigation Effect with CSS3 →
CSS3 Dropdown Menu
Here you will be shown how to create a simple drop-down menu and insert CSS3 transitions to make it more interactive.
CSS3 Navigation with Transitions
CSS3 Navigation with Transitions →
CSS3 Animations
Animated Web Banners with CSS3
In this tutorial you will learn how to create some amazing animated web banners with CSS3.
Animated web Banners with CSS3 →
CSS3 Loading Animation Loop 2 Set
CSS3 Loading Animation Loop 2 Set →
CSS3 Tooltips & Alerts
CSS3 Tooltip with Animation NO jQuery
In this tutorial you will learn how to create a simple animated tooltip with CSS3. The effect created is amazing, and the most important thing is that you will not be using any Javascript.
CSS3 Tooltip with Animation NO jQuery →
CSS3 Effects
Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5
In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes”.
Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 →
Experiments with Background-Clip: Text
With the CSS property “background-clip: text”, you can add a background image to a text element. With this tutorial you will experiment with it and create some fun examples by adding CSS3 transitions.
Experiments with Background-Clip: Text →
Filter Functionality with CSS3
Using the general sibling combinator and the :checked pseudo-class, you can toggle states of other elements by checking a checkbox or a radio button. This tutorial will explore those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.
Filter Functionality with CSS3 →
Original Hover Effects with CSS3
The power of CSS3 is enormous and in this tutorial you will be shown how to exploit it in a very creative way, by creating some thumbnail hover effects with CSS3 transitions.
Original Hover Effects with CSS3 →
CSS3 Sliders and Charts
CSS3 Progress Bars
In this tutorial you will learn how to create the awesome CSS3 Progress Bars you can see above.
CSS3 Layouts & Pages
Splash and Coming Soon Page Effects with CSS3
In this tutorial you will be shown how to go wild using CSS3 animations and create an amazing splash and coming soon page.
Splash and Coming Soon Page Effects with CSS3 →
Slopy Elements with CSS3
In this tutorial you will see some simple examples and ways to create slopy, skewed elements with CSS only.
Page Transitions with CSS3
In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Here you will be shown how you can have your own, but instead, using CSS Transitions and the :target property to do all the magic.
Creating a PHP and CSS3 Powered About Page
In this tutorial, you will be creating a simple about page that is powered by PHP, HTML5 and CSS3.
Creating a PHP and CSS3 Powered About Page →
Miscellaneous
How to Create a Beautiful Icon with CSS3
In this tutorial you’ll create a document icon with pure CSS3.
How to Create a Beautiful Icon with CSS3 →
How To Create Depth And Nice 3D Ribbons Only Using CSS3
In this tutorial you will learn how to create beautiful 3D ribbons only using CSS3.
How To Create Depth And Nice 3D Ribbons Only Using CSS3 →
Bokeh with CSS3 Gradients
In this tutorial you will learn how to create a beautiful Bokeh effect using CSS3 Gradients.
0 yorum:
Yorum Gönder