Separation, Abstraction, and Cascading in CSS | LispCast TLDR: LESS and Sass (and similar solutions) have saved CSS for three reasons: separation, abstraction, and cascading. While I welcome them, CSS still has other problems which I believe can be solved. I propose some solutions. Introduction A lot is said about LESS and Sass, and for good reason. But when people talk about why they are so great, they miss the main point. In this essay, I will try to put into words (and some pictures) what my intuition tells me as a developer and programming language enthusiast to clarify why CSS is innately unmaintainable, does not satisfy its own design goals, and why LESS and Sass make a bad language more bearable. Zero Degrees of Separation Way back when, people used HTML tables to style their pages. Those were the days of font tags and tables. Then CSS came along, and people talked a lot about separation of content from presentation. Your styles were still tied to the structure of the document they were styling. HTML and CSS are separate but not equal.
Pure CSS Slide Up and Slide Down If I can avoid using JavaScript for element animations, I'm incredibly happy and driven to do so. They're more efficient, don't require a JavaScript framework to manage steps, and they're more elegant. One effect that is difficult to nail down with pure CSS is sliding up and down, where the content is hidden when "up" and slides in when "down". The reason it's difficult is because you may not know the content height. After playing around with different CSS properties, I've found a way to make a pure CSS sliding effect. The HTML The effect really only requires one element, so we'll stick to that: <div class="slider">Some content here.... Add as much content as you'd like. The CSS Before we get into the trick, let's set the few obvious properties: overflow-y and the CSS animation properties: So now the fun: the trick we'll use to make the height play nice is the max-height property. Not Perfect So there comes the case where the height of the element could be 100px or 100000px.
All you need to know about CSS Transitions CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye. In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions. Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU. Browser support CSS transitions are supported in practically every version of Firefox, Safari and Chrome. Webkit based browsers (Safari and Chrome), still require -webkit prefixes for animations and gradients, but these are soon being removed. Applying transitions A simple way of applying transitions is with CSS pseudo-classes, such as :hover. When the :hover pseudo-class is activated, the height will be transitioned linearly from 100px to 200px over a period of 2 seconds. Transitioning gradients Clipping
CSS Filters CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have a look at how CSS filters work and how you can quickly create elements that are beautifully filtered! There are many CSS filters to choose from: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert. The following CSS snippet will blur an element: Multiple filters are separated by spaces, so we could also add grayscale and opacity values to the blur: Let's get crazy with hue-rotate as well: If static filtering isn't enough for you, CSS filters also animate with @-webkit-keyframes: Expect a performance hit with heavy CSS filter usage; be sure to heavily test your site wherever filtering is used.
Live Tools - Des outils de génération d'UI en CSS3 / HTML UI Live Tools est un site web proposant 4 générateurs d'éléments d'interface: Boutons, formulaires, icones et ribbons en CSS3. Voici un site web qui va rendre grand service à ceux qui n'ont pas forcément la fibre graphique dans le sang ! ui Live Tools est un service proposant 4 générateurs: Générateur de boutonsGénérateur de formulairesConstructeur d'icônesGénérateur de ruban / ribbon A chaque fois, de nombreux paramètres sont disponibles pour personnaliser le style, les couleurs, ... Générateur de boutons CSS3 Le générateur de bouton est complet, vous pouvez personnaliser les couleurs des différents états, avec des transitions CSS3... Générateur de formulaires design CSS3 Même principe mais pour les formulaires. Il ne s'agit pas là d'un générateur de formulaires avec validateurs etc, mais un générateur de formulaire design. Générateur d'icones Le générateur d'icones permet de créer à la main, pixel par pixel à la souris. Générateur de rubans CSS3 Site Officiel
Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development community. The design used as of 2014 was largely created by Lennart Schoors. May I use your data in my presentation/article/site, etc? Yes, the support data on this site is free to use under the CC BY-NC 3.0 license. Is there a way to see the support data in colors other than red/green? Yes, you can enable accessible colors from this link or from the option under Settings. Do you have the data available in a raw format? Yes, the raw support data is available on GitHub and is updated regularly. Could you add feature X to the site? Adding features takes quite some time and there are many requests for additions. If you've done the research yourself already, you can also submit a feature on GitHub. Which features do you choose to add to this list?
Menu déroulant en CSS3 avec transition et max-height - CSS / CSS3 Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 52 989 fois. Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Démonstration Le sujet du menu déroulant est très sensible. Un bout de HTML Le code HTML est assez classique, il s’agit d’imbriquer des listes non-ordonnées. <ul id="menu"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Level 1.1</a></li> <li><a href="#">Level 1.2</a></li> </ul> </li><li><a href="#">Menu 2</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> </ul> </li><li><a href="#">Menu 3</a> <ul> <li><a href="#">Level 3.1</a></li> <li><a href="#">Level 3.2</a></li> <li><a href="#">Level 3.3</a></li> </ul> </li> </ul> Place au CSS
Focal Point: Intelligent Cropping of Responsive Images The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more. Today we’re going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS. Read on to see how it works. Meet Focal Point Focal Point is a GitHub project and CSS framework created by Adam Bradley. The problem with this idea of course is that if you arbitrarily crop an image, you could be cutting out the most important part of the image! Fortunately, Focal Point allows you to specify a targeted area of the image to retain (the focal point). How Does It Work? Implementing Focal Point is a pretty unique process, but it’s quite easy. The process here is to find the face, then count grid units from center. The Code Build It