Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Pseudo Elementos y Pseudo Clases en CSS
Search
SiloCreativo
June 24, 2015
Design
0
230
Pseudo Elementos y Pseudo Clases en CSS
Presentación del curso sobre Pseudo elementos y Pseudo Clases en CSS
SiloCreativo
June 24, 2015
Tweet
Share
More Decks by SiloCreativo
See All by SiloCreativo
REST API y el futuro de los themes en WordPress
silocreativo
0
1.5k
Diseño Más Responsive con WordPress
silocreativo
0
1k
Diseñando una mejor Experiencia Ecommerce en Responsive
silocreativo
0
1.7k
Diseño responsive y accesibilidad con WordPress: usuario vs pixel
silocreativo
1
690
Diseño Web Responsive y Accesible con Temas WordPress
silocreativo
1
11k
Tendencias de Diseño Web con WordPress. SiloCreativo
silocreativo
1
10k
De Visitante a Cliente. Optimizando el Diseño Web. SiloCreativo
silocreativo
1
160
Other Decks in Design
See All in Design
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
310
太田博三(@usagisan2020)
otanet
0
200
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
250
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
410
Personal Story Sequence - Vendetta(WIP)
elrns88
0
310
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
750
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
600
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
520
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
450
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
520
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
280
我做了一個詐騙網站...嗎?
crboy
1
170
Featured
See All Featured
Fireside Chat
paigeccino
34
3.1k
How GitHub (no longer) Works
holman
310
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Automating Front-end Workflow
addyosmani
1366
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Making the Leap to Tech Lead
cromwellryan
133
9k
Gamification - CAS2011
davidbonilla
80
5.1k
Visualization
eitanlees
145
15k
RailsConf 2023
tenderlove
29
920
Designing for Performance
lara
604
68k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
490
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Transcript
PSEUDO ELEMENTOS PSEUDO SELECTORES CSS3
¿Cuáles son? ¿Para qué sirven? TEORÍA > SELECTORES 1
selector:pseudo-clase { propiedad:valor; } selector::pseudo-elemento { propiedad:valor; } TEORÍA
“Para dar estilo a un estado especial de un elemento
o seleccionar un elemento concreto de un conjunto.” a:hover { … } a:first-child { … } PSEUDO CLASES
:hover { … } PSEUDO CLASES OK OK
a:hover { … } a:visited { … } a:active {
… } a:link { … } PSEUDO CLASES
EJEMPLO!
:focus { … } :checked { … } :disable {
… } PSEUDO CLASES
input:focus { … } input[type="checkbox"]:checked { … } input:disable {
… } PSEUDO CLASES
EJEMPLO!
:first-child { … } PSEUDO CLASES
:last-child { … } PSEUDO CLASES
:nth-child { … } PSEUDO CLASES
:nth-child(even) { … } PSEUDO CLASES
:nth-child(an+b) { … } PSEUDO CLASES
:nth-child(3n+1) { … } PSEUDO CLASES
:nth-of-type() { … } PSEUDO CLASES
EJEMPLO!
¿Cuáles son? ¿Para qué sirven? TEORÍA > ELEMENTOS 2
“Para dar estilo a una parte específica de un elemento”
a::after { … } p::first-letter { … } PSEUDO ELEMENTOS
: vs :: :pseudo-clase { … } :pseudo-elemento { …
} COMPATIBILIDAD CSS1 y 2
: vs :: :pseudo-clase { … } ::pseudo-elemento { …
} COMPATIBILIDAD CSS3
a::before { … } PSEUDO ELEMENTOS
a::after { … } PSEUDO ELEMENTOS
a::before, a::after { … } PSEUDO ELEMENTOS
¿Para qué lo puedo usar? EN PRÁCTICA 3
a::after { … } BOTONES CON ESTILO
i::before { … } FontAwesome Littlebox WEBFONTS
span::before { … } span::after { … } The Shapes
of CSS CSS SHAPES
p::first-letter { … } p::first-line { … } Rorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore CAPITAL LETTERs
Master en CSS3 AVANZADO 4
a:nth-of-type(2n+3)::after { … } a:nth-of-type(even):hover { … } ORDEN LÓGICO
FIX FLOATS Float Left Float Left Parent Element “Collapsed”
element::after { visibility: hidden; display: block; font-size: 0; content: "
"; clear: both; height: 0; } FIX FLOATS
FIX FLOATS Float Left Float Left Parent Element
::selection { … } consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore ::selection
dialog::backdrop { … } ::backdrop OK
dudas:
[email protected]
GRACIAS! silocreativo.com @silocreativo escuela.it @EscuelaIT