Skip to content

TechRepublic

  • Top Products Lists
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • TechRepublic Academy
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
  • TechRepublic Premium
  • Top Products Lists
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • TechRepublic Academy
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
  • See All Topics
  • Sponsored
  • Newsletters
  • Forums
  • Resource Library
TechRepublic Premium
Join / Sign In
Developer

10 beautiful examples of CSS3 design

By Ryan Boudreaux140 December 21, 2011, 11:15 PM PST

Image
1
of 10

12222011Figure_A.gif
12222011Figure_A.gif
10 beautiful examples of CSS3 design

CSS3 Analog Clock

CSS3 Analog Clock

ntCSS3 Analog Clock by Paul Hayes is his quick project and experiment that works in Safari and Google Chrome. Essentially the working analog clock is a series of four images, and using CSS3 to overlay, transform, and transition the hands’ movement, the time is obtained from a short JavaScript.

10 beautiful examples of CSS3 design

Snow Flakes

Snow Flakes

ntSnow Flakes by Natalie Downe utilizes examples of CSS3 animation, text-shadow, transform, and keyframes to create a page of gently falling snow flakes. The snow flakes are called by a short script which controls the number of flakes, how fast they fall, and the duration of the snow fall. The animation is best viewed in Google Chrome.

10 beautiful examples of CSS3 design

Matrix Effect

Matrix Effect

ntMatrix Effect by Girlie Mac embeds a Katakana font with CSS3 keyframes, transform, and animations using webkit prefixes to create this demonstration, again, best viewed in Google Chrome.

10 beautiful examples of CSS3 design

Speech Bubbles

Speech Bubbles

ntPure CSS Speech Bubbles by Nicolas Gallagher demonstrates the use of CSS3 backgrounds, linear gradients, border radius, and transform translate to create stunning speech bubbles in a selection of variants.

10 beautiful examples of CSS3 design

Embossed Text

Embossed Text

ntEmbossed Text Effect by Analog, a company of friends who make websites, uses a subtle 1px CSS3 text-shadow effect for their h2, h3, p, and li text, creating an embossed text effect.

10 beautiful examples of CSS3 design

Polaroids

Polaroids

ntPolaroid’s with CSS3 by Zurb is a gallery display using CSS3 transform and rotate to turn images into a set of randomly selected Polaroid pictures.

10 beautiful examples of CSS3 design

CSS3 Transitions

CSS3 Transitions

ntCSS3 Transitions Gallery by AlexandtheWeb demonstrates CSS3 transitions, transform, rotate, border radius, and masking to create this stunning example.

10 beautiful examples of CSS3 design

3D Butterfly

3D Butterfly

ntCSS3 3D Butterfly by eletriq demonstrates the use of CSS3 perspective, transform-origin, and transform-style to create a 3D butterfly object in flight. Display is available in Safari only.

10 beautiful examples of CSS3 design

3D Cube

3D Cube

nt3D geometry with 3D CSS3 transforms by Joe Lambert uses rotateX(deg), rotateY(deg) axis, transitions, and transformVector to create this 3D cube with rotation controls, and is displayed in Safari.

10 beautiful examples of CSS3 design

CSS3 Time Machine

CSS3 Time Machine

ntCSS3 Time Machine by Joe Critchley utilizes CSS3 perspective, transform, and translate to create this image slide show similar to Apple’s Time Machine interface (as displayed in Safari).

  • Developer
  • Account Information

    Share with Your Friends

    10 beautiful examples of CSS3 design

    Your email has been sent

Share: 10 beautiful examples of CSS3 design
Image of Ryan Boudreaux140
By Ryan Boudreaux140
Thirteen years of web and graphic developer experience.
  • Account Information

    Contact Ryan Boudreaux140

    Your message has been sent

  • |
  • See all of Ryan's content

TechRepublic Premium

  • TechRepublic Premium

    Best of Confluent Current 2023: The State of Data Streaming

    TechRepublic Premium was at Confluent’s Current 2023 event, held in San Jose, California, September 26-27. Our coverage of the event comprises an analysis of data streaming, interviews, the role of stream governance and a look at Apache Flink. From the download: Confluent used the Current 2023 ‘next generation of Kafka Summit’ event in San Jose ...

    Downloads
    Provided By TechRepublic Premium Published:  Sep 2023 Modified:  Sep 2023 Read More
    Download Now
  • TechRepublic Premium

    Quick Glossary: Fintech

    Fintech is a fast changing landscape that constantly introduces cutting-edge ideas and developments. TechRepublic Premium presents this quick glossary of fintech terms and concepts to help you understand technological breakthroughs and make educated decisions. From the glossary: DECENTRALIZED FINANCE Often referred to as DeFi, this utilizes emerging technology to remove third parties and central financial ...

    Downloads
    Provided By TechRepublic Premium Published:  Sep 2023 Modified:  Sep 2023 Read More
    Download Now
  • TechRepublic Premium

    Anti-Money Laundering Policy

    Money laundering poses a detrimental impact on businesses and the economy as a whole. According to the United Nations Office on Drugs and Crimes, the amount of money laundered around the world in a single year is presumed to be 2–5% of global GDP, which is roughly $800 billion to $2 trillion. The purpose of ...

    Downloads
    Provided By TechRepublic Premium Published:  Sep 2023 Modified:  Sep 2023 Read More
    Download Now
  • TechRepublic Premium

    Hiring Kit: Video Game Audio Engineer

    Modern video games rely on a cornucopia of sounds to engage and engross players. Whether it is ambient sound to set the mood, music to invoke a feeling or dialog to tell the story, sound is vital to the immersive experience of a video game. The individual responsible for meshing all those disparate sounds together ...

    Provided By TechRepublic Premium Published:  Sep 2023 Modified:  Sep 2023 Read More
    Download Now

Services

  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information
  • Careers

Explore

  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • TechRepublic
  • TechRepublic on Twitter
  • TechRepublic on Facebook
  • TechRepublic on LinkedIn
  • TechRepublic on Flipboard
© 2023 TechnologyAdvice. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Property of TechnologyAdvice