#:after

[josegremarquez]

Pseudoclases en CSS: Estilos Dinámicos para Elementos Específicos

Pseudoclases y Selectores: Una Combinación Poderosa Selectores: Son las herramientas que utilizamos en CSS para identificar los elementos HTML a los que queremos aplicar estilos. Pueden ser tan simples como un nombre de etiqueta (p.ej., p) o tan complejos como combinaciones de clases, ID y otros atributos. Pseudoclases: Son palabras clave que se añaden a los selectores para seleccionar…

Pseudoclases en CSS: Estilos Dinámicos para Elementos Específicos

[giniland-blog]

CSS :before & :after pseudo-elements疑似要素で画像を重ねるimage stack illusionを作る

CSS :before & :after pseudo-elements疑似要素で画像を重ねるimage stack illusionを作る

イメージ画像をスタックしてイリュージョン化にするCSSです。 とてもいい素材で、今後使うかもしれないということで design shackから引用させていただきます。 Sample HTML Code [html] http://giniland.com/wp-content/uploads/2016/12/IMG_1156.jpg" width="200" height="200"> http://giniland.com/wp-content/uploads/2016/12/IMG_1156.jpg" width="200" height="200"> http://giniland.com/wp-content/uploads/2016/12/IMG_1156.jpg" width="200" height="200"> [/html] CSS Code [css]…

View On WordPress

[giniland-blog]

CSS :before & :after pseudo-elements疑似要素使って３Dボタンを作る

疑似要素使って３Dボタンを作る英語ページを発見！ Sergio Camalichのページを拝見して引用させていただきます。 3DボタンSample HTML Code: [html] Numbah one! [/html] CSS Code: [css] #button { width:165px; height:23px; display:block; font-family:Arial, "Helvetica", sans-serif; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-transform:uppercase; text-align:center; text-shadow:1px 1px 0px #07526e; padding-top:12px;…

View On WordPress

[fatihhayri]

Sözde sınıflar(:before ve :after) içinde filtre kullanımı

:before ve :after ile oluşturulan içerik içinde ie'de kullanılan filtre çözümleri çalışmıyor. filtre bir elemena veya nesne ye tanımlanabildiği için sözde sınıflarda çalışmıyor.

Kaynka: http://stackoverflow.com/questions/10403916/why-does-a-filter-gradient-on-a-pseudo-element-not-work-in-ie8/10669986#10669986

[daneastwell]

Google, Facebook, and Twitter all make use of empty DOM elements to crop dense sprites and display icons next to certain links in their interfaces. The alternative is not to use empty elements but be forced into using multiple images and/or to design sub-optimal image sprites that have their component images spaced out. Pseudo-elements can be used in much the same way as empty DOM elements (via CSS background image hacks – Nicolas Gallagher)

[theephil-blog]

My adventure's with CSS3

Even though I know a lot about CSS, I've never used CSS3 at all. Except for the odd border-radius and box-shadow.

So I thought I'd look into using some more advanced stuff that CSS3 offers. The main two I have looked at is the :before and :after selectors. These two selectors basically allow you to specify content that you want to be placed before or after a certain element, whether it be a div or a paragraph.

The first example I created was a banner, click here, this banner was created with one div element and one paragraph element. 

The idea is that the all the left hand side elements are created by using the :before and :after on the div box and then the right hand side elements are created by using them selectors on the paragraph element. Pretty simple stuff.

To get the triangles by the way was done by using borders, as web browsers render borders by using triangles for some reason.

As another example to these selectors I also created a chat bubbles by using the same method, except all the elements were created with just one div box. Click here to view

So thats it, my new adventure into the land of CSS3 selectors. 

[aethernet-blog]

css | clear:both

Un autre truc intéressant pour lequel je dois remercier Raphaël et j'en profite pour mettre le lien de la vidéo kiwi.

L'idée ici est de remplacer le contenu vide que l'on est obligé d'ajouter dans l'html avec une propriété "clear:both" pour nettoyer les retour après un contenu flottant ( "float" )

En fait on génère le contenu avec de la css comme suit :

.wrapper { float: left; }

.wrapper:after {content: ""; clear:both;}

Et par magie tout nos .wrapper vont être suivi d'un contenu vide avec la propriété clear:both.

N'espérez pas que ça marche avec ie6 ou ie7.