background preloader

Archive

Archive
Related:  COURS, TUTORIELS et Co

Blog | CSS3 Looped Animations Recently I was working on the Filmic.eu teaser site. My idea was to create simple transitions purely based on the CSS3 features so the site worked and looked nice without any single line of JS code. One of the challenges I faced was how to create a CSS animation that loops through multiple text elements using fade in and out transitions. Looking at the CSS3 Animations Module specs there are properties useful for creating a CSS animation loop: The animation-iteration-count property can be set to infinite so the animation repeats forever. The animation-direction property when set to alternate allows to play animation cycle iterations that are even counts in a reverse direction. In my case I wanted to animate 3 list elements, showing and hiding one after another. The CSS animation-delay property comes to help. My solution for this problem was to play around with the animation @keyframes rule to emulate the "delay" behaviour by keeping the property value unchanged over some period of time.

HTML tutorials What is HTML? HTML stands for Hyper Text Markup Language is used to create web pages as well as other types of documents viewable in a web browser. HTML is a standard specified and maintained by World Wide Web Consortium. From its invention, HTML has evolved through different versions. Present version of HTML is HTML 4.01. Next version of HTML is HTML 5, which is under development but developers have already started using some of its features. In the consequent pages, we will discuss HTML 4.01 in detail. HTML code of an simple web page <! <! Result This is an example HTML page Lorem ipsum dolor sit amet, consectetur adipiscing elit. Learn HTML from w3resource.com View this example in browser Features of the w3resource HTML tutorials We have covered all the HTML 4.01 elements or tags and their attributes. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Join our Question Answer community to learn and share your programming knowledge. Help the community: Python: Fizzbuzz C++: Decimal to binary conversion

Arquitectura CSS – Soluciones Después de ver en el artículo “Arquitectura CSS – Problemas” los problemas de código y las consecuencias que podemos tener por tenerlos, es hora de darte algunos consejos para mejorar. Aunque no es amplia, mi experiencia me ha enseñado que apegarse a estos principios te ayudará a lograr tus metas en una buena arquitectura CSS. Sé intencional La mejor manera de asegurarte de que tus selectores no estilizan elementos que no quieres estilizar es no darles la oportunidad. /* Granada */ #main-nav ul li ul { } /* Rifle de Francotirador */ .subnav { } Dados esos dos ejemplos, piensa que el primero es como una granada y el segundo como un rifle de francotirador. Separa tus asuntos Ya he mencionado que una zona de contenidos bien organizada puede ayudar a aflojar el acoplamiento de la estructura HTML con el CSS. En general, los componentes CSS deberían definir el aspecto visual, no su distribución en la página, ni su posicionamiento. Personaliza el nombre de tus clases Es un problema. Herramientas

Coding Horror Kilian Valkhof • Front-end developer and User experience designer • KilianValkhof.com Ombres avancées avec CSS3 et box-shadow - CSS / CSS3 CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Pseudo-éléments :after et :before Imaginez que dans un site vous souhaitiez ajouter derrière un lien la langue du site en référence (qui, pour rappel, se précise grâce à l’attribut hreflang sur un élément <a>) vous pouvez le faire en passant par du CSS : La base de travail Pour résumer simplement notre démarche nous avons des divisions : Ombre simple Bogues

Comment bâtir le cahier des charges de votre site internet ? Vous avez un projet de création de site internet ? Si vous ne savez pas comment le formaliser, cet article est pour vous ! La rédaction d’un cahier des charges est une étape incontournable dans la création ou la refonte d’un site internet sur mesure. Qu’est-ce qu’un cahier des charges de site internet ? Un cahier des charges de site internet est un document référentiel formalisant à la fois les objectifs à atteindre tout en intégrant toutes les contraintes techniques, esthétiques et fonctionnelles de votre projet. De l’arborescence au web-design en passant par le référencement, un cahier des charges vous permettra de vous poser les bonnes questions et surtout d’y apporter les premières réponses, seuls ou avec l’aide d’une agence web. Que doit-on trouver dans un cahier des charges ? En fonction de la complexité de votre projet, le cahier des charges à produire sera plus ou moins détaillé, les quelques informations suivantes sont indispensables pour tous les types de sites internet : 2.1.

Crea botones geniales y fácilmente con CSS3 Button Maker Ya que los botones de ahora hacen uso de gradientes, sombras y esquinas redondeadas que contribuyen en gran medida. En los antiguos navegadores que no soporten estas propiedades, la reserva es de color sólido de fondo, sin sombras y esquinas cuadradas. No es gran cosa. Button Maker es una herramienta que permite crear botones utilizando las nuevas capacidades de CSS3 de una manera mas sencilla sin hacer tantas cosas que tomaría crear mucho código para casi todos los botones. Si necesitas generar muchos botones que usan mucho CSS3, esta puede ser la herramienta que necesitas. Deja de sufrir un poco y prueba esta herramienta que podría ahorrarte mucho tiempo y trabajo css-tricks.com/6478-css3-button-maker

Smashing Magazine — For Professional Web Designers and Developers 5 Cool CSS Hover Effects You Can Copy and Paste Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy. Bring Your Boring Site to Life Hover effects can make your site feel much more dynamic and alive. The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. Bump Up Live Demo: Click Here to Launch This works best when you have a series of horizontal items. This one is super easy to implement and there are in fact several ways to go about it. The transition here is completely optional as the effect still works quite well without it. Bump Up CSS Stack & Grow Live Demo: Click Here to Launch For this one I wanted a sort of lava lamp effect so that as you move your mouse down the list, each image slowly expands and then goes back to its original size. Stack & Grow CSS Fade Text in Conclusion

58 formations à suivre pour devenir Développeur Web Le métier de Développeur Web vous intéresse ? Vous souhaitez vous y mettre à fond mais vous ne savez pas par où commencer ? Retrouvez notre sélection de 58 formations sélectionnées avec soin par notre équipe pour vous aider dans cet apprentissage. Se former au métier de Développeur Web Les bases du web pour le DEV Pour bien débuter, il est nécessaire de connaître le vocabulaire lié au développement. Débuter le développement web avec HTML5 et CSS3 Dans ce tutoriel, il sera question des fondamentaux de HTML et de CSS. Formation Bootstrap 4 En seulement 3h, Steven Sil vous apprend à maîtriser la dernière version du framework front-end : Bootstrap 4. Pack Créer un blog responsive Passons à un peu de pratique avec ce pack de formation dédié à la création d’un blog responsive avec Photoshop, Bootstrap et WordPress ! Mettre un site en ligne Voici à présent un tutoriel très pratique qui vous explique les étapes de mise en ligne d’un site Internet. PHP : Formation complète PHP orienté objet (POO)

HTML a fondo Todo lo que necesitas para aprender HTML Manual de HTML Disponemos del, tal vez, mejor manual de HTML de la Web en español, que trata todos los temas con gran detalle. Introducciones Para quien desee unos conocimientos teóricos de base, estos manuales ayudarán a ubicar HTML dentro del mundo del desarrollo. Aplicaciones Prácticas Manuales para desarrollar aspectos eminentemente prácticos y muy específicos. Más información de HTML Nuestro directorio Enlaces de interés a contenidos de relacionados con el lenguaje HTML dentro y fuera de DesarrolloWeb. Complementos Otros manuales interesantes relacionados con HTML. Servicios Sitios que ofrecen espacio gratis para tu web: Espacio gratis HTML Una lista de correo donde intercambiar mensajes de ayuda sobre HTML: Lista de correo de ayuda FAQs de HTML También puedes consultar las FAQ de HTML. Talleres Mostramos los 10 últimos artículos técnicos y claramente prácticos sobre el manejo de HTML.

CSS Globe Display inline-block, une valeur trop peu utilisée - CSS / CSS3 Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 40 028 fois. Floatera, floatera pas… mais pourquoi ne pas utiliser la valeur inline-block de la propriété display ? Exemples de l’article Utiliser display: inline-block Il s’agit de la valeur par défaut des éléments input. Le formulaire Quelle transition ! Dans cette mise en page les label passent d’un display à valeur inline à un display: inline-block; Un élément en inline-block peut recevoir une valeur de vertical-align qui, par défaut, ne semble pas être la même sur IE et sur les autres navigateurs. Notre code CSS va donc nous permettre d’avoir un comportement homogène. Le CSS : Aperçu du formulaire Une navigation horizontale (éléments de liste) Le deuxième cas où l’on peut remplacer aisément le float par du inline-block c’est celui d’une liste dont on souhaite dimensionner les liens placés sur une seule ligne. Le code HTML : Le code CSS : Quelques soucis… Le cas Internet Explorer Aperçu

Related: