🌐 Public

Learning CSS3

By Paul Bremer

Added by Paul Bremer: “Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project.

1 Kick-Start Your Project: A Collection of Handy CSS Snippets

Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project. In one of the previous articles "Basic Ready-to-Use CSS Styles", we saw how we could create

2 Take Your Design To The Next Level With CSS3

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it's clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way

3 Responsive Retina-Ready Menu

A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. View demo Download source Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a "desktop" inline version, a

4 How to use CSS3 transitions

Everyone loves motion. Adding the fourth dimension (time) to a site design is the main way screen-based design stands out from print design. CSS Transitions are a simple method for animating properties of an element enabling you to enrich certain events in your web design, without the need of Flash or JavaScript. The W3C aptly describes transitions on their website

5 CSS3 Media Queries

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.

6 CSS3 Box Shadow and Inset Shadow

I'm sure by now you will have seen multiple tutorials on how to create a box-shadow effect with CSS but I'm pretty sure that you will not have seen as many tutorials on how to go about creating an inner/inset shadow. Before we get started it's probably worth mentioning two things: Box Shadow was recently removed from the CSS3 borders

8 Loading Effects for Grid Items with CSS Animations

Some inspiration for loading effects of grid items using CSS animations. View demo Download source Today we'd like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we'd like to give you some inspiration. Some of

9 Learning to Love the Boring Bits of CSS

Issue № 358by Published in Peter GasstonCSS, HTML · The future of CSS gives us much to be excited about: On the one hand, there's a whole range of new methods that are going to revolutionize the way we lay out pages on the web; on the other, there's a new set of graphical effects that will allow on-the-fly filters

11 How to use any font you like with CSS3

Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not. As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex.

12 Learning Principles for Improving Your CSS

This article will cover some basic principles and tips on how to learn and become better at CSS, based on personal experience. In today's article I will mostly talk about my own experience, and what I have learned about CSS after almost one year and a half of heavy practicing. First, let me remind you that CSS is an extremely

14 An Introduction to the CSS Flexbox Module

CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionized front-end development? Well, today, we're going to talk about a new layout mode, called flexbox - new in CSS3. I'm sure you're raring to go! Let's get started after the jump. Subsequent

15 CSS3 Animation Cheat Sheet

How it worksThe CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10).

vikram

Freshman

  • 0 Playlists
  • 0 Followers

Alex Kovrizhnyi

Freshman

  • 0 Playlists
  • 0 Followers

Rasha GH Ahmad

Freshman

  • 0 Playlists
  • 0 Followers

Shailesh

Freshman

  • 0 Playlists
  • 0 Followers

Ayma

Freshman

  • 0 Playlists
  • 0 Followers

Ratnam Raja

Freshman

  • 0 Playlists
  • 0 Followers

ketnery

Freshman

  • 0 Playlists
  • 0 Followers

Wim Korevaar

Freshman

  • 0 Playlists
  • 0 Followers

Ruslan Marin

Freshman

  • 0 Playlists
  • 0 Followers

Wendy Vargas

Freshman

  • 0 Playlists
  • 0 Followers

Mathieu Croset

Freshman

  • 0 Playlists
  • 0 Followers

Angela Velasquez

UX/UI Designer from Honduras.

  • 0 Playlists
  • 0 Followers

kmyers

Freshman

  • 1 Playlists
  • 0 Followers

Clone Scripts

ClonesCloud is developed powerful PHP Clone Script websites and softwares.

  • 14 Playlists
  • 0 Followers

Shibasish Patel

Freshman

  • 0 Playlists
  • 0 Followers

Thomas Schmitt

Freshman

  • 1 Playlists
  • 0 Followers

Asmaa heikal

Freshman

  • 2 Playlists
  • 0 Followers

Rahaf Waheep

Freshman

  • 0 Playlists
  • 0 Followers

Nivedhitha Venugopal

Freshman

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?