background preloader

CSS3 : Transformations 2D

CSS3 : Transformations 2D
CSS3 apporte les transformations en 2 dimensions à travers la propriété transform et une liste de fonctions prédéfinies. Voyons ensemble la prise en charge actuelle de cette propriété et des fonctions qui l'accompagnent. La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Il est donc possible de modifier l'apparence d'un élément grâce à un ensemble fonctions 2D : Syntaxe La syntaxe est simple d'emploi. transform: function(value); Il est souvent nécessaire d'utiliser les préfixes vendeurs (-webkit-, -moz-, etc.) devant la propriété transform pour utiliser les transformations 2D sur les versions actuelles et passées de navigateurs. Il est également possible d'effectuer des transformations combinées en espaçant les fonctions d'un simple caractère blanc. transform : function1(value1) function2(value2) function3(value3); La propriété transform-origin transform-origin: 50% 50%; Related:  Front-endTutoriels

Building Responsive Websites Using Twitter BootStrap Before we start, there are a few things that you should know. This is a sequel to my previous article, Twitter Bootstrap Tutorial – Handling Complex Designs, which showcased many basics about building websites using Twitter Bootstrap from scratch. I highly recommend you read the previous article before jumping into the responsive nature of Twitter BootStrap. I am very thankful to our readers who praised my previous article and encouraged me to write the sequel to it. While the Release Candidate 1 of Twitter Bootstrap 3 is already out, we will be using version 2.3.2, which was their last most stable framework version. What do you mean by the “Responsiveness” of a website? The first thing that comes to our mind when we use the word “Responsive” in the context of websites is that it should be compatible with all kinds and sizes of devices. With the help of CSS3 and definitely HTML5, this trend is increasing every day. Well, you don’t have to worry any more. Setting up Let’s Begin Conclusion

Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quelles différences entre la 2D et la 3D sur le web? Pour l’affichage d’un site web à l’écran, nous travaillons en 2D: axe X : positif vers la droite de l’écran,axe Y : positif vers le bas de l’écran. Avec l’introduction des transformations 3D par le W3C, cela induit une nouvelle dimension: Quels navigateurs sont compatibles? Comment utiliser les transformations 3D?

CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Zoom sur image avec fenêtre « modal responsive » en pure CSS3 - Trucsweb.com La visualisation d’image grand format dans une fenêtre modale communément appelée le « Magic zoom » ou « Image Zoom Magnification » ne date pas d’hier. Autrefois en pure Javascript, il y a une bonne douzaine de Tutoriels dans la collection « Les fenêtres ou l’objet WINDOW - Le premier objet du Javascript » ou encore combiné au Flash « Ouvrir une fenêtre ou Pop-up en Flash Partie 1 ». Puis jQuery a changé le visage du Web et donc il existe des dizaines de variations, il suffit d’une requête sur Google pour s’en rendre compte. Deux bon exemple : fancyBox 2 ou Magnific Popup par Dmitry Semenov. Mais il existe aussi excellente solution Javascript sans jQuery : TinyBox2 JavaScript Modal Windows - TinyBox2 par Michael LeigeberLe plus léger des exemple Javascript SimpleModal SimpleModal par PlasmExcellent exemple Javascript sans jQuery. On retrouve souvent une variation intéressante dans les sites de vente en ligne pour voir les détails d’une image avec Magic Zoom. L’idée est la simplicité.

Web Font Specimen The Ultimate Guide to Social Media Image Sizing In this day and age of what seems like endless social networks it can be a pain to find out what size images to upload for each site. Most sites have their own sizes that they utilize and as such it can be a real pain trying to figure all of that out. until now…. LunaMetrics has released this awesome infographic detailing the correct size for most of the popular social networks. This includes sites such as FAcebook, Twitter, Google Plus, Pinterest, Youtube and Linkedin. If you have been having trouble trying to size your image correctly then this is the image you need to check out. Pin It Even if you think you may not need it now, i would suggest grabbing a copy of it and keeping it for reference. What do you think of this infographic?

3D Transforms and Animations < CSS 3D Transforms were first implemented by the Safari/WebKit team ages ago. Support in other browsers is still variable, but getting better. CSS3 animation and 2D transforms have been implemented in Safari, Firefox, Opera and even Internet Explorer 10, but in this article we're taking it a step further using keyframes to set up perpetual animation effects in 3D space. These effects will work in WebKit (Safari/iPhone/iPad and Chrome) and Mozilla (Firefox) browsers. 1. What are keyframes? A @-webkit-keyframes block contains rule sets called keyframes. While this may sound complicated, and can be, we're starting with one of the most simple examples. In this example the keyframe has been assigned the name 'spinner' for later reference. 2. The 'stage' is the element in which our animation takes place. The optional perspective attribute defines how extreme the 3D effect will be as elements move up and down the Z-axis (come out of the page). 3. 4. And here's the final product! 5. 6. 7. 8. 11.

CSS3 Shadows CSS3 nous apporte des brides du côté obscur de la force en proposant de gérer des ombres diverses et variées directement depuis votre feuille de styles : blocs et textes sont concernés avec également la combinaison de plusieurs ombrages pour obtenir des effets avancés. Les ombres portées prennent aujourd’hui une place importante dans le web design et permettent la mise en exergue d’éléments importants, ou l’ajout d’une touche de profondeur dans vos graphismes. Il est possible de dire adieu aux images superflues uniquement destinées à la réalisation d’ombres portées ; adieu à la soupe de <div>, <span>, et autres structures en tableau pour réaliser des effets graphiques riches. Deux types d’ombres existent en CSS : les box-shadow, les ombres ajoutées aux éléments de type bloc, les text-shadow, les ombres ajoutées au contenu textuel. Il est évident, comme tout effet graphique, que l’utilisation des ombres doit être faite avec parcimonie et ne pas gêner l'utilisateur. Syntaxe de box-shadow

CSS Alternate Fixed & Scroll Backgrounds How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on Fixed. Browser support ie Chrome Firefox Safari Opera 9+ These days we see a lot of parallax effects in web projects. Demo images from Unsplash. Creating the structure The HTML is quite basic: we alternated <div> elements with a .cd-fixed-bg class – used for the sections with fixed backgrounds – with divs with a .cd-scrolling-bg class – used for the sections with plain backgrounds. Adding style When I was thinking about how to achieve this effect, my first thought was to play with jQuery: maybe I should create a <div> in position fixed, and use it to change the background image while the user scrolls. That’s it!

CSS maintenables Kaelig Deloumeau-Prigent (252 pages, Éditions Eyrolles / Design web, ISBN-13: 978-2212134179) Encore un nouveau livre sur CSS me direz-vous ! Certes, mais celui-ci capte enfin un public différent. Il se pose en quelque sorte comme un chaînon manquant entre les livres de CSS purement dédiés aux designers et les autres plus techniques. Le sous-titre de l'ouvrage ("avec SASS et Compass") porte à confusion d'entrée de jeu, car... il ne s'agit pas d'un livre sur SASS et Compass. Le reste de l'ouvrage traite plus généralement (et heureusement selon moi) de bonnes pratiques, de conventions, d'outils et d'astuces. Mon ressenti sur ce livre est extrêmement positif : pour moi, il s'agit ni plus ni moins du livre que j'attendais depuis très longtemps dans le domaine des CSS; thème déjà très souvent traité mais rarement voire jamais dans un contexte de production et de bonnes pratiques. Sommaire

Related: