background preloader

CSS3 properties explained

CSS3 properties explained
There are wonderful times for us web-designers. CSS3 has finally arrived and it’s here to stay. With an equal high support among all modern browsers we have great possibilities right at our is not only here to guide you through the often dense jungle of the CSS3 syntax, but it also wants you to encourage to use CSS3 right now! Don’t care about the old Internet Explorers, a website hasn’t to look the same in every browser. I’m a big fan of Sketch. It has its flaws, but generally it’s a much better tool to make designs than Photoshop.

Related:  Tutostuto

3 stunning CSS animation effects that will captivate your users Beautiful visual design isn’t enough any more, modern design needs great interaction to really stand out. Animations in your designs can provide clarity, direct attention, and create a delightful experience. Designing interactions is exciting, but costly. Often it takes back and forth between designers and developers to get animations just right; but it doesn’t need to be this way. CSS transitions afford the opportunity for designers with limited knowledge of code to enhance their projects with stunning motion effects that will engage users like never before. Let’s start with something simple: moving from one screen to another…

CSS 3 Cheat Sheet (PDF) - Smashing Magazine Advertisement Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card. So we asked our friend Chris Hanscom from (who created the HTML 5 cheat sheet) to create a quick reference card for CSS 3. We already encouraged you to experiment with CSS 3 in our last posts and now you can use this handy cheat sheet to use the new CSS 3 features in some modern browsers (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.).

box-shadow - MDN Docs This article is in need of a technical review. The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). CSS button, 110 best! Tired of turning upside down the internet and not finding what you’re looking for? Well, here we’re providing you the best of our CSS buttons search. Here you’ll find over 100 buttons, among pure CSS and image + CSS made. Animate SVG Icons with CSS3 & jQuery November 30, 2013 | Web Development | By Joseph Howard Recently, there’s been a lot of buzz throughout the web design and development community on using SVG for icons. Due to a number of limitations and inconveniences, using raster-based images for your icons, has become an increasingly painful and restricting endevour.

Best Collection of CSS3 Tutorials and Techniques The latest revolutionary technology in web-designing, CSS3 is at the disposal of a web-designer to improve the working-flow and create exciting web pages. The new advanced features make the designing much easier, leaving the time consuming process of complex effects recreations in the past. Actually, CSS3 made classic CSS techniques easier to implement, thus providing greater flexibility and making the overall process much faster and much more effective. When implementing CSS3 techniques, take into account that only the most up-to-date browsers can support them. However, CSS3 is worth trying as the new features and effects will help to create stunning web pages. Many web designers have already taken the advantage of new drop down menus, image hover effects, multiple background images, multiple columns and many more other awesome CSS3 techniques.

How to Create 3D Text With CSS3 We’ve already seen how the CSS3 text-shadow property can be used to create glowing and blurred text. Today, we’re going to push the property to its limits and enter the realm of 3D: This is achieved without graphics, plugins, or canvas trickery. Displaying Icons with Fonts and Data- Attributes Traditionally, bitmap formats such as PNG have been the standard way of delivering iconography on websites. They’re quick and easy, and it also ensures they’re as pixel crisp as possible. Bitmaps have two drawbacks, however: multiple HTTP requests, affecting the page’s loading performance; and a lack of scalability, noticeable when the page is zoomed or viewed on a screen with a high pixel density, such as the iPhone 4 and 4S. The requests problem is normally solved by using CSS sprites, combining the icon set into one (physically) large image file and showing the relevant portion via background-position. While this works well, it can get a bit fiddly to specify all the positions. In particular, scalability is still an issue.

Related:  CSS 3CSS3Guides - learning basics