• Thiết kế website bán hàng miễn phí 2018

50 Example CSS3 and Tutorials Style - 50 ví dụ và hướng dẫn về sử dụng CSS 3

oday i collected beautiful style design of CSS3 example and tutorials that available for demo view and download such Text Effects and Layout, CSS3 Animated, CSS3  3D  Text, Pure CSS, CSS drop-shadows, CSS image replacement, css background, css rounded corners, border radius, box shadow,css3 inner shadow, css drop shadow, css3 drop shadow and CSS3 slider/slideshow … etc.

CSS 3 are going to be very interesting. They will allow the designer/developer to select on much more specific levels of the document. One of the nice things about this module is that many browsers are already starting to support the advanced CSS 3 selectors, so you can start trying them out now. You can find out more 40 Useful HTML5 Lessons, Tutorial for Learning HTML5 .

CSS3  Tutorials has brought about a number of aesthetically impressive new features. Perhaps the most fun of these to play with is CSS animation, which allows you to perform many motion-based functions normally delegated to JavaScript. Join me on my epic quest to discover the coolest, most innovative, and more importantly, nerdiest use of CSS3 and HTML5 animation on the web. Begin!

1. Showing Product Information With CSS3 3D Transform

There are many ways to show product information, for example, when hovering the product image, product information is sliding over or even using pop-up. In this tutorial I will show how to share our product information with style 3D cube using CSS3 Transform.

css3 example 03 Demo | Download

2. Slideup Boxes 

This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+

wufoo css Download | Demo

3. Animated Check Boxes Using Css3

Here’s some form input checkboxes styled with CSS3 to look like iPhone style on/off buttons. Just messing about again with CSS3.

css3 form Download (2103) | Demo

4. CSS3 Animated Bubble Buttons

Learn how to create a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary.

css3 example 2011 04 Download | Demo

5. Animated CSS3 starbursts

If you create your starbursts with CSS3 you can do so much more than with images. Below are a few more demos where I’ve experimented with different numbers of points, rounded borders, text-shadows, animations with transitions and transforms, and also translations. To see the animations you will need to use Safari or Google Chrome.

star burt css3 Download | Demo

6. BonBon–Sweet CSS3 buttons

Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.And voila.. here they are, the BonBon Buttons. Named after the French word for “Candy“. So, let’s take a tour trough the candy store.

css3 example 2011 06 Download | Demo

7. CSS3  3D  Text

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset.

tumblr l4p03oQIFw1qz72boo1 500

Download (951) | Demo

8. Text-Shadow Converter Tools

text-shadow was included in CSS2, removed from CSS2.1 and returns in CSS3. It has been supported in Safari since version 1.1, and is supported in Chrome, Firefox 3.5 and Opera 10.

CSS Shadows take three length values, and a color. The length values are a horizontal offset, a vertical offset and a blur. Offsets may be negative or positive

text sarow tools

9. Animation using pure CSS3

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.

3d animation css3 Download (547) | Demo

10. Pop Out Details on Hover CSS3

I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple.

demo1 Tutorials | Demo

11. Pure CSS speech bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

example css3 Download (1085) | Demo

12. Turn Images Polaroids with CSS3 

In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures. Check out the demo and code snippets below

css3 example 2011 12 Demo | Download (1324)

13. Pure CSS folded-corner effect 

Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds.

menu with hierarchy Demo | Download (1684)

14. CSS drop-shadows without images 

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

css3 drop shadows bg Demo | Download (1601)

15. Pure CSS GUI icons (experimental)

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.

pure css gui icons Demo | Download (1399)

16. CSS image replacement using pseudo

An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7.

replacement css3 bg Demo | Download (770)

17. CSS pseudo-element Solar System using semantic HTML

This is a complete reworking of another author’s basic reproduction of the classic model of our solar system using CSS. By using pseudo-elements (again) I wanted to reproduce as much as possible without presentational HTML and JavaScript. In addition, by hooking into HTML microdata I’ve put together a rough scale model of the solar system that demonstrates some further uses of CSS generated content.


css solar system scale model Demo | Download (696)

18. Pure CSS social media icons (no  images)

This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.

css social media icons Demo | Download (1018)

19. CSS typography experiment

This is a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS 2.1, and modern browser implementations of a couple of CSS3 properties. Along the way a few new modern browser bugs and inconsistencies were exposed.

i love typography a lot Demo | Download (877)

20. CSS3 box-shadow rolled corners

Rolled corners are popular. Dimension is in. The CSS3 box-shadow property isn’t entirely flexible enough to really create the effect (masked shadows please!) but with a couple layers it can be approximated in some browsers within limits. Looking good in Firefox and Safari. Not so much in Chrome.

css3 example 2011 20 Demo | Download (1415)

21. Super Cool CSS3 Flip Effect with Webkit Animation

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.

css3 example 01 Demo | Download (859)

22. CSS menu using CSS Sprites

Here I am presenting a cool overlapped pure CSS menu created using CSS sprites. This is an initial draft version, so far I have checked it only in Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 and it looks fine. If anyone of you finds any issues in any other browsers, please lemme know.

free overlapped pure css menu using css sprites cool sprites

23. Feature Table Design

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS.Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.

featuretabledemo Demo |Download

24. Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

gray Demo |Download (726)

25. CSS Blurry Background Effect

Simple fixed positioning of two separate background images allows for a very neat effect. Like looking through frosted glass.

css background 442x268 Demo | Download

26. 3D Text Tower

Puts a shadow under text that is solid rather than blurred, by way of multiple shadows all offset by 1px. Rollovers grow the height of the tower.

css 3d 442x242 Demo | Download

27. Nice 3D Ribbons Only Using CSS3

There are some properties of the CSS3 languages that can help us to accomplish this mission.
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds.

ribbonrev Demo |Download (1316)

28.  Awesome Overlays | Demo

The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

css3 last 11 442x275

29. Rounded Corners Drop Shadows Opacity in CSS3

There are some very cool features that have come along with HTML5 and CSS3. Generally, alot are only able to be displayed in Firefox and Webkit-based browsers like Chrome and Safari. Here, I’ll show you an example of how to implement drop shadows, rounded corners and opacity in your designs using CSS3.

css3 dropshaddow 442x258 Demo | Download (1274)

30. Entypo & The Buttons

Besides these it contains 43 pictograms games can also be used using three different styles: bevelled, rounded rectangle. Although there are six colors to choose from: Orange, Magenta, Cyan, Red, Black and Green.

css3 example 02
Demo | Download 

31. Style Menu with CSS3

Here’s a quick experiment I did with CSS3. Again I was just mucking about with CSS3 transitions which could one day replace all the fancy jQuery animation tricks people use. The outcome was a really simple animated sliding verticle menu.

css3 example 2011 03

Download (1351) | Demo

32. Creating “Next Level” Search Form Using jQuery & CSS3

Recently, we found a ton of new forms of style search using beautifully designed CSS3 and JavaScript. Apple for example, to expand the input field when it receive focus from the user. The question is “how far we can go for style search form?” In this tutorial, we will move a search form to the next level using jQuery and CSS3.

css3 example 04

Demo | Download

33. Making an Impressive Product Showcase with CSS3

css3 tutorials 09 Demo

34. CSS3 Button Maker

css3 tutorials 10 Demo

35. Annotation Overlay Effect with CSS3

css3 tutorials 11 Demo

36. Fluid CSS3 Slideshow with Parallax Effect

css3 tutorials 12 Demo

37. Animated Content Tabs with CSS3

css3 tutorials 13 Demo

38. Login and Registration Form with HTML5 and CSS3

css3 tutorials 14 Demo

38. Accordion with CSS3

css3 tutorials 15 Demo

39. Page Transitions with CSS3

css3 tutorials 16 Demo

40. Sliding Image Panels with CSS3

css3 tutorials 17 Demo

41. Animated Web Banners With CSS3

css3 tutorials 18 Demo

42. Filter Functionality with CSS3

css3 tutorials 19 Demo

43. Thumbnail Proximity Effect with jQuery and CSS3

css3 tutorials 20 Demo

44. Fullscreen Background Image Slideshow with CSS3

css3 tutorials 21 Demo

45. CSS3 Lightbox

css3 tutorials 22 Demo

46. Slopy Elements with CSS3

css3 tutorials 23 Demo

47. Splash and Coming Soon Page Effects with CSS3

css3 tutorials 24 Demo

48. Typography Effects with CSS3 and jQuery

css3 tutorials 25 Demo

49. Animated Buttons with CSS3

css3 tutorials 26 Demo

50. Original Hover Effects with CSS3

css3 tutorials 27 Demo

Share facebookShare facebook

Facebook Comments

Bạn đã đọc tin này chưa ?

Go Top