CSS3 Previews - Borders CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.Update: Now works in Internet Explorer from version 9.0 Example 1 - Rounded Borders background-color: #DAE8EC;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 2px solid #B8CB99;padding: 10px; Example This is an example of a box with rounded corners. Example 2 - Rounded Borders (Specific Corners) background-color: #DAE8EC;border-top-left-radius: 10px;border-bottom-right-radius: 10px;-moz-border-radius-topleft: 10px;-webkit-border-top-left-radius: 10px;-moz-border-radius-bottomright: 10px;-webkit-border-bottom-right-radius: 10px;border: 2px solid #B8CB99;padding: 10px; This is an example of a box with rounded top left and bottom right corners. You can use the following properties for Mozilla-Firefox / Safari Example 3 - Gradient Borders
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. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. The pseudo-elements need to be positioned and given explicit or implicit dimensions. The next step is to add a CSS3 box-shadow and apply CSS3 transforms. One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction.
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. Before we get started, consider using one of our HTML5 Templates or CSS Themes for your next project—that is, if you need a quick and professional solution. HTML 5 is the next major version of HTML. Before we begin marking up the page we should get the overall structure straight: In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. It still looks like HTML markup, but there are a few things to note: In HTML 5, there is only one doctype. Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. We have already defined a new section in the document using the section tag.
CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Selectors Level 3 Abstract Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. This document describes the selectors that already exist in CSS1 [CSS1] and CSS2 [CSS21], and further introduces new selectors for CSS3 and other languages that may need them. Selectors define the following function: expression ∗ element → boolean That is, given an element and a selector, this specification defines whether that element matches the selector. These expressions can also be used, for instance, to select a set of elements, or a single element from a set of elements, by evaluating the expression across all the elements in a subtree. Status of this document 1. 1.1. 2.
CSS only menus Latest Demonstrations A CSS ONLY click action tree menu v321-01-2017A third responsive multi-level tree menu with slide action A CSS ONLY click action tree menu v216-12-2016A second responsive multi-level tree menu with slide action A CSS ONLY click action tree menu17-11-2016A responsive multi-level tree menu with slide action A CSS ONLY click action concertina menu14-11-2016A responsive multi-level concertina menu with bounce A CSS ONLY click action slide in menu29-10-2016A responsive multi-level slide in menu A CSS ONLY click action flexbox menu13-05-2016An accordion menu using flexbox and order animation. A circular menu with bounce09-03-2016A CSS only circular menu with bounce animation using cubic-bezier animation timing A responsive swipe-momentum menu24-02-2016A responsive swipe action momentum menu suitable for all the latest browsers and OS. A responsive multi-level menu14-05-2015A responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
Using CSS3 Transitions, Transforms and Animation CSS Triangle You can make them with a single div. It’s nice to have classes for each direction possibility. The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle. Demo See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen. Examples Dave Everitt writes in: For an equilateral triangle it’s worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width
50 Awesome CSS3 Animations We have put together a smart collection of cool CSS effects to help you learn the nitty-gritty details so that you can use it to create more beautiful web sites. Enjoy! 1. 2. 3D Thumbnail Hover Effects [Demo] 3. 4. This awesome website consists of more than 100 different CSS effects like 2D transitions, background transitions, icon CSS effects, border transitions, shadow and glow transitions, speech bubble CSS effects, and cool CSS curl effects. 5. You will find more than 50 CSS animation examples on this simple website. 6. 7. 8. 9. 10. 11. 12. 3D Flipping Circle with CSS3 & jQuery [Demo] 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. Use the basic features of CSS3 Transform: rotate. 49. Analogue clock created using webkit transition and transform CSS. 50. 3D Cube That Rotates Using Arrow Keys You can use up, down, left, and right keys to navigate the 3D cube. 51. 52. 53. 54. 55. 56. 58. 59.
Basic Ready-to-Use CSS Styles This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements. View demo Download source Today we are going to dig a little bit more into process development. You can also build classes of classes to custom things to suit your needs. This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles. Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements. Note that there are no vendor specific prefixes in this tutorial, but you can find the prefixed styles in the CSS. Block-level elements You are creating an image gallery and want to give some subtle styles to the pictures? The Markup For this whole section, I took an a division with the class “block-level” and added the additional classes to it. The Basic CSS Shadows Links