background preloader

10 CSS3 Properties you Need to be Familiar with

10 CSS3 Properties you Need to be Familiar with
We've already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it's encouraged! The key is to first determine whether or not you're okay with a slightly different presentation from browser to browser. View Demo Easily the most popular CSS3 property in the bunch, border-radius was sort of the flagship CSS3 property. The irony is that we're all perfectly fine with the idea of providing an alternate viewing experience for mobile browsers. Please note that both Safari 5 and IE9 implement the official `border-radius` syntax. Some readers may not be aware that we can also create circles with this property. View Demo ...And, if we want to have some fun, we can also take advantage of the Flexible Box Model (detailed in #8) to both vertically and horizontally center the text within the circle. View Demo View Demo View Demo View Demo Related:  HTML5 & CSS3CSS

HTML5 : 20 Conseils et astuces pour coder proprement ses pages Voici une liste de 20 astuces pour coder vos pages proprement en HTML5. Tous ces conseils, mis bout à bout, vous serviront à améliorer votre référencement, respecter certaines normes W3C ou encore optimiser la compatibilité. Efforcez-vous de suivre le plus rigoureusement ces règles en fonction de votre projet. 1. Le Doctype à subit un rajeunissement avec l’arrivé du HTML5. 2. Vous avez déjà du l’entendre, mais pensez toujours à bien fermer vos balises. 3. Il existe de nombreuses raisons pour qu’une page soit accessible à différentes adresses à la fois. 4. Bien qu’il existe d’autres solutions plus complète, vous pouvez néanmoins régler certain aspect du cache du navigateurs de vos visiteurs. Suivant votre cas, il peut être préférable de définir le cache. En revanche si, par exemple, votre site à accès régulièrement à des bases de données qui le maintiennent à jour le cache ne dois pas fonctionner. 5. 6. Le respect de la sémantique est primordiale pour un bon référencement naturel. 7. 8.

The History of CSS Resets When artists begin a new painting, they don’t immediately reach for the cadmium red and the phthalo blue. They first prime the canvas . Why? To ensure that the canvas is smooth and has a uniform white hue. Many web designers prefer to use a CSS "reset" to "prime" the browser canvas and ensure that their design displays as uniformly as possible across the various browsers and systems their site visitors may use. This is Part 1 of a three-part series of articles on the topic of CSS resets. What Is CSS Reset? When you use a CSS "reset," you’re actually overriding the basic stylesheet each individual browser uses to style a web page. The problem is that every browser’s stylesheet has subtle but fundamental differences. Some of the most common elements that are styled differently among different browsers are hyperlinks ( <a> ), images ( <img> ), headings ( <h1>through <h6>), and the margins and padding given to various elements. So which browser is right, Firefox or IE? Who Uses Resets?

Create a fancy responsive image-on-hover effect | PeHaa Blog In this tutorial we will create a fancy image-on-hover effect. We’ll use pure css3 and provide a jQuery solution for the browsers that do not support opacity and transitions. We will also take care that it works responsively. Step 1 : Photoshop We have to prepare two versions of the image : the image we want to see on hover and its desaturated copy. Step 2 : Let’s start with the html markup Step 3: Basic styles We start our stylesheet with a basic reset. The main containing element #wrap is centered up and given the specific width 865 px = 845px (image size) + 2x10px (borders size). Step 4: Grayscale to color transition (see demo) The img element is positioned relatively, the colored version (.onhover) is given 0 opacity and absolute position. To deepen the effect of transition between the normal and hover state we will add a fading out inner shadow (span.shadow): Step 5: Let’s add scaling and rotation (see demo) Step 6: And what if we want it responsive ? Step 7: jQuery solution

Slideshow en CSS3 - Alsacréations Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Présentation et compatibilité Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable. Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" passée il y a peu en W3C Recommandation et sur le module "CSS Animations Module Level 3" actuellement en Working Draft. La pseudo-classe target Beaucoup de liens d'un site web renvoient sur des parties précises d'une page par l'intermédiaire d'ancres. Voici la syntaxe d'un lien renvoyant sur une ancre.

A Comprehensive Guide to CSS Resets This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world. While almost all of these CSS resets are generally provided free for public use (many through Creative Commons licensing), it is incumbent upon you to check the terms of use before putting them to use in your projects. This guide follows Part 1, where the history of CSS resets was discussed; you’re advised to read that before this one to get the most out of this guide. This is Part 2 of a three-part series of articles on the topic of CSS resets. In putting together this guide, the 2007 collection of resets by Jeff Starr — who, as an aside, has contributed articles on Six Revisions — was used as a jumping-off point. "Hard" Reset As discussed in Part 1 of this series, the original version of the "hard" reset was by web designer Andrew Krespanis: It wasn’t long before folks added border: 0; and outline: 0; to the list of properties, giving us: Poor Man’s Reset Siolon Reset

Stu Nicholls | CSS PLAY | Responsive multi-level menu jQuery Date : 26th May 2015 For all modern browsers Information A little deviation from the CSS only responsive menus, this one uses a little jQuery to control the responsive nature of the menu so that it even works in IE7 and IE8. The jQuery changes the classname of the menu at a set screen width so that you can have two separate stylesheets, one for the PC menu and the other for a tablet/mobile menu. For all the latest browsers, operating systems, PC, tablets and smartphones, including IE7 and IE8. For PCs and larger tablets, hover/tap the top level and sub level list items with arrows to open their sub menus, move the mouse off the menu or tap anywhere off the menu to close open sub menus. For smaller tablets and smartphones click/tap the menu tab to slide the menu in from the left. The jQuery routine also controls the scrolling of the menu on the iPad and iPhone. Because this menu uses jQuery instead of CSS it can be dropped in anywhere on your page and will work. Copyright Terms and Conditions

Utiliser CSS3 aujourd'hui, outils et ressources - Alsacréations Bien que les spécifications CSS 3 soient encore en phase de maturation, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer. Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public. De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. Voyons quelques uns de ces outils en ligne en vogue actuellement : CSS3pie.com CSS3please.com CSS3.info

Should You Reset Your CSS? By Michael Tuck This article explores the ongoing debate on whether or not web designers and web developers should reset their CSS, sharing the thoughts and opinions of several web professionals. This is a three-part series of articles on the topic of CSS resets. After discussing the rich and interesting history of CSS resets (Part 1) and going over CSS reset stylesheet options (Part 2), we will now discuss the pros and cons of using reset stylesheets here in Part 3. The Benefits of Resetting Your CSS Web designer/developer and book author Morten Rand-Hendriksen is a huge fan of CSS resets; he has advised everyone to use them as the foundation of their stylesheets. Defending the "hard reset" method, Coyier outlined two main concerns that web designers typically have against using the universal selector. The first is that it can break web browser default styles for things such as form elements, which he said was "untrue" unless you use a border:0 property in the style rule. Acknowledgements

Content Accordion in Pure CSS3 Very clean and cool Content Accordion that works on all browsers and devices that support the :target selector. It's based on a tutorial from DesignModo. Basically, there are three divs with different ids and a link in them with their href attribute same as their parent div's ids. This helps in targeting the divs (tabs) when the respective link is clicked. Initially, the content div is hidden by setting its display property to none. When the link is clicked, the display property of the respective content div is set to block so that it shows up. Also, it's good to note that the other tabs will return to their original closed state when a new tab is clicked. Related:

Outils indispensables pour HTML5 & CSS3 | bertrandkel bertrandkeller Les outils indispensables pour le HTML5 et le CSS3 06.09.10 / CSS + HTML / bertrand keller Un liste d’outils pour le développement HTML5 et CSS3. Articles similaires : S'abonner aux commentaires Commentaire | Trackback | Tags : javascript Navigation Temporelle Ajouter un commentaire XHTML : Vous pouvez utiliser ces tags: <a href="" title=""><abbr title=""><acronym title=""><b><blockquote cite=""><cite><code><del datetime=""><em><i><q cite=""><strike><strong> © Copyright 2009 bertrandkeller .

35 Fresh CSS3 Articles & Tutorials / CSS / Splashnology - Web Design and Web Technology Community inShare0 This is cool collection of most wanted, usefull tutorials and articles by CSS3. In this article you find out how make cool CSS3 Gradient Buttons, Sliding or bouncing Navigation without JavaScript, Slide effect menu with the Apple-Style and much more. Hope you like it. CSS3 Gradient Buttons Today I’m going to show you how to put the CSS gradient feature in a good practical use. Design a Prettier Web Form with CSS 3 Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. Pure CSS3 Animated AT-AT Walker from Star Wars In this article we’ll quickly walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back. CSS3 Tutorial – sliding or bouncing Navigation without JavaScript This Step-by-Step Navigation-Tutorial is made by the CSS3-Properties “border-radius” and “animation”. CSS3 Transition Tutorial – Slide effect menu with the Apple-Style 0inShare

Related: