Mise en page CSS avancée grâce à la propriété display L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes:
Transitions CSS3 Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. Les spécifications des CSS 3 sont découpées en modules. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification. Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript Exemples concrets
Designing for Touch Screen | What Creative Design Agency Now, this post was supposed to go out about two weeks ago, and since then it seems that every designer under the sun has written on the same subject – That’ll teach us for being lazy. Nonetheless, we decided to publish it anyway, just in case anyone missed any of the other great posts out there… By now you should all have heard of the iPad, and if not then you must have been living under a rock for the last few months! 1. CSS hover states (such as a:hover) are not supported. However, this can cause a few problems, especially concerning drop-down menus – which is quite a major issue for many websites. Alternatively, for a drop-down menu to be obvious on a touch device (because you can tap-to-open some of them) there must be a link / button to indicate that the menu expands, such as a small arrow. 2. 1024 x 768 It’s not dead and it’s making a come back! 3. 4. The (unwritten) standard is for sub-menus to be on the left hand side of a web page. 5. iPad Rotation CSS 6. By Chris Kemm
Les ombrages en CSS3 Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d'image décorative et de découpes intempestives. Tout n'est pas rose puisque certains navigateurs à la traîne ne reconnaissent pas encore ces différentes propriétés et nécessitent des adaptations personnalisées. Faisons le tour du propriétaire... Box-shadow La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML. Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. En voici une illustration (Voir le résultat sur votre navigateur) : Syntaxe Compatibilité et utilisation concrète Seuls les navigateurs modernes, reconnaissent la propriété box-shadow. Adaptation pour Internet Explorer <9 Le filtre Shadow Le filtre Glow La syntaxe :
Effet Lightbox en CSS3 grâce à transition Effet Lightbox en CSS3 grâce à transition Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 29 965 fois. C’est en parcourant un lien partagé par Raphaël hier dans la journée, que je me suis décidé à tripoter un petit peu de CSS et HTML pour améliorer le rendu de M. Où cela se passe-t-il ? Vous trouverez les fichiers sur l’espace de test de CreativeJuiz, précisément à cette adresse : Le HTML Le code HTML utilisé est vraiment basique. <figure tabindex="0"> <img src="images/demo1.jpg" alt="Demo" /> <figcaption>Rorschach Artefact</figcaption> </figure> <span></span> <figure tabindex="0"> <img src="images/demo2.jpg" alt="Demo" /> <figcaption>Mystic Light</figcaption> </figure> <span></span> <figure tabindex="0"> <img src="images/demo3.jpg" alt="Demo" /> <figcaption>A simple idea... Le CSS Contenteditable M. À propos de Geoffrey Laisser un commentaire
Beginner’s Guide to Responsive Web Design Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future. Free trial on Treehouse: Do you want to learn more about responsive web design? Try a free trial on Treehouse. Over the past year, responsive design has become quite the hot topic in the web design community. What is responsive design? Let’s just get right into it: Believe it or not, the Treehouse blog that you’re reading this article on is actually a responsive design! It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. Fluid Grids
CSS current work & how to participate Explanation of colors & status codes W3C indicates the maturity of specifications by a status code. The CSS working group uses the following, from least to most stable: The names are defined in sections 7.3 and 7.4 of the W3C process document. The informal stability levels used to group the specs are defined in this 2007 description of CSS stability levels. If you want to help Everybody can take part in the discussions on the archived mailing list www-style@w3.org. On the mailing list, you will be talking to many people, many very busy people. If you are sending comments on a specific CSS module, please prefix the subject of your message with the appropriate spec code (given in the “Status of this document” section) in brackets, e.g. Laurens Holst (a.k.a. If you work for a W3C member organization, you can also join the CSS working group and see drafts before they are published. About the test suites The test suites have their own archived mailing list public-css-testsuite@w3.org.
Expanding Images using HTML5's contenteditable tabindex HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, which opens up some interesting possibilities! We'll exploit this little trick to make an expanding image (like a lightbox without the overlay) right within some content. UPDATE: Even better, you can give attributes a tabindex attribute, like you would a form element, which allow allows :focus without the editability. HTML5 Markup HTML5 has nice elements for including captioned images. <section class="image-gallery"><figure><img src="images/img-1.jpg" alt="jump, matey" /><figcaption">Jump! The Images The CSS Related
How To Learn WordPress in a Week (For Free!) Thanks to the low barrier to using and working with WordPress, anyone with an idea and time to spare can develop a product or service on top of WordPress and start a business. In fact, many of our members are already doing that. Whether you’re working full-time and juggling family, social and volunteer commitments, mastering WordPress is within your reach – and there are so many resources available for free that if you do have time you have absolutely no excuse! If you’re willing to put in the time you do have free, it’s easy and quicker to master WordPress than you may imagine. This post offers a step-by-step guide for intermediate users who want to become competent with WordPress over seven days. First Thing’s First This guide makes a few assumptions: You have used WordPress and have the software installed (obviously!). So let’s get stuck in… Monday WordPress Codex, WordPress TV and Make WordPress Core If you think the Codex is only for beginners, think again. Tuesday Wednesday Thursday Friday