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.

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.

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

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 .

www.lehrling.biefer.com Text Link Tip Die meisten Tooltips sind Javascript. Dieses hier besteht bloss aus HTML Links und Span-Tags mit CSS. Eigentlich sind es Links Tips. Sie beruhen auf der Pseudoklasse a:hover. So wird ein Tooltip über einem Text-LinkCss Links Tips sind super einfach.Sie können mehrzeilig sein. eingerichtet: <a href="#">Text-Link<span>Css Links Tips sind super einfach. Bild Link Tip Und so wird ein Link Tip über ein Css Links Tipskönnen auchüber einenBildlinkgenutzt werden.nfo Bild angesprochen: <a href="#"><img src="images/info.png" border="0"><span>Css Links Tips<br />... Link Tip CSS a:hover Die Container können beliebig gestylt werden. Mehr

HTML5 – Les nouveaux éléments Comme évoqué dans une précédente revue de presse, voici le premier article de ma série sur HTML5. Plutôt que de faire du comptage de points entre Apple et Adobe, j’ai décidé de commencer par faire un tour d’horizon des nouveautés proposées par cette nouvelle spécification du W3C. Dans ce premier article, je vous propose donc de faire un voyage à la découverte des nouveautés du côté de HTML. ; pour connaître les nouvelles balises, et les nouveaux attributs que nous pouvons déjà ou pourrons bientôt utiliser dans nos navigateurs. Du layout au canvas en passant par les WebForms, le son et la vidéo, tout tout tout, je vous dirai tout sur HTML5. Commençons donc par le commencement: HTML5 qu’est-ce que c’est ? Sommaire HTML5 est au départ la nouvelle version du langage HTML en cours de développement par le W3C. Pour répondre à ces problématiques et favoriser l’émergence du web sémantique, la spécification propose : Nouveau modèle de contenu Nouveaux éléments de mise en page Eléments interactifs

Guide to Responsive-Friendly CSS Columns By Katy DeCorah On July 25, 2014 With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. #Where to declare columns You can declare columns on any block level element. In the image below, the left side depicts CSS column rules being applied to the second paragraph to transform just that content into columns. #How to declare columns There are three different ways to declare columns: Declare column-count.Declare column-width.Declare both (recommended). Let's explore the different ways to declare columns. #1. Use column-count to declare the number of columns. Live Demo See the Pen [2] CSS Columns, count-count by Katy DeCorah (@katydecorah) on CodePen. The number of columns remains consistent even as the browser width changes as demonstrated in the gif below. #2. Use column-width to declare the width of the columns. #3. #Customizing columns #column-gap

Le futur avec HTML5 par Bruce Lawson | bertrandkeller Le HTML4 n’a pas remplacé le HTML1 (celui qu’on utilise pour rédiger un billet de blog, par exemple), le HTML5 (HTML5 et l’avenir du web) ne remplacera pas le HTML4. Mais alors à quoi sert le HTML5 ? Bruce Lawson d’Opera (Opera, un navigateur pour personnes formidables) éclaire vos lanternes. La spécification HTML5 était, à l’origine, dénommée « Applications Web 1.0″. Les images et les graphiques avec canvasLa suppression de la validation de formulaires avec webforms 2.0Le stockage automatique en local de ses donnéesLa GéolocalisationLa création de barre d’outils et de menus Pour avoir un aperçu des possibilités de HTML5 : Voir le billet original The Future of HTML 5. Navigation Temporelle Ajouter un commentaire

Related: