Articles of css3

contour sur une seule bordure

Comment appliquer une bordure en encart dans un élément HTML, mais seulement d’un côté. Jusqu’à présent, j’utilisais une image pour cela (GIF / PNG) que j’utiliserais alors comme arrière-plan et l’étirerais (répéter-x) et me placerais un peu au-dessus de mon bloc. Récemment, j’ai découvert la propriété CSS, ce qui est génial! Mais semble entourer tout […]

Centrer une grande image de taille inconnue à l’intérieur d’un div plus petit avec un débordement caché

Je voudrais centrer un img dans un div sans javascript et sans images d’arrière-plan . Voici un exemple de code Je ne connais pas la taille de l’img et il devrait pouvoir dépasser la largeur du parent Je ne connais pas la largeur du div parent (c’est 100%) La div parent a une hauteur fixe […]

Comment puis-je remplir une div avec une image tout en la maintenant proportionnelle?

J’ai trouvé ce fil – Comment étirer une image pour remplir un tout en conservant le rapport d’aspect de l’image? – ce n’est pas tout à fait ce que je veux. J’ai une div avec une certaine taille et une image à l’intérieur. Je veux toujours remplir le div avec l’image, peu importe si l’image […]

Dois-je utiliser max-device-width ou max-width?

Avec les requêtes multimédia CSS, vous pouvez utiliser max-device-width pour cibler une largeur de périphérique (telle qu’un iPhone ou un périphérique Android) et / ou une max-width qui cible une largeur de page. Si vous utilisez max-device-width , lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, le CSS ne changera […]

CSS: pure animation CSS défilement

Je cherchais un moyen de faire défiler lorsque je clique sur un bouton situé en haut d’une page en utilisant uniquement CSS3. J’ai donc trouvé ce tutoriel: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/ Démo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/ Mais c’est un peu trop avancé pour mes besoins puisque je veux juste que le navigateur défile sur un clic sur un bouton situé en […]

CSS Media Query – Pauses-clavier pour les règles d’orientation – solution alternative?

Je travaille avec plusieurs tablettes – à la fois Android et iOS . Actuellement, j’ai les variations de résolution suivantes pour toutes les tablettes. 1280 x 800 1280 x 768 1024 x 768 (iPad évidemment) – iPad n’a pas ce problème Le moyen le plus simple d’appliquer le style basé sur l’orientation du périphérique consiste […]

Fancy Media Queries avec certains Magie LESS

Ce serait bien d’emballer des styles css pour différentes résolutions dans certaines classes css en utilisant moins. J’aimerais faire quelque chose comme: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } À la fin, quelque chose comme ceci devrait être le résultat: footer […]

CSS Calc alternative

J’essaye de changer dynamicment la largeur d’un div en utilisant CSS et pas de jquery. Le code suivant fonctionnera dans les navigateurs suivants: http://caniuse.com/calc /* Firefox */ width: -moz-calc(100% – 500px); /* WebKit */ width: -webkit-calc(100% – 500px); /* Opera */ width: -o-calc(100% – 500px); /* Standard */ width: calc(100% – 500px); Je veux aussi […]

CSS 3.0 dans Visual Studio 2010

Je voudrais utiliser la validation (CSS 3.0) au lieu de CSS 2.1 pour Visual Studio 2010. J’ai parcouru SO et remarqué un commentaire disant que la version 3.0 n’était pas finalisée, elle n’était donc pas disponible pour 2008, mais je ne savais pas si appliqué à 2010. Est-ce que je n’utilise tout simplement pas le […]

CSS: Comment dire .class: last-of-type

Duplication possible: Comment sélectionner le dernier enfant avec un nom de classe spécifique dans CSS? Comme le titre l’indique, je veux adresser les règles CSS au dernier élément d’un certain type qui a une certaine classe. Le code suivant fonctionne parfaitement: div:last-of-type { margin-right:0; } mais je veux quelque chose comme div.class:last-of-type { margin-right:0; } […]