Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
240
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
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
LayerX DesignersDeck
layerx
PRO
0
940
202409_会社概要資料_Englishver.pdf
zakkerooni
0
220
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
540
Improve a service workshop
mastervicedesign
1
130
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
210
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
540
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
530
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
650
Slip N Slime - Character Design Ideation
thebogheart
0
340
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
180
Featured
See All Featured
Speed Design
sergeychernyshev
25
670
Done Done
chrislema
182
16k
Navigating Team Friction
lara
183
15k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Raft: Consensus for Rubyists
vanstee
137
6.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
910
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Automating Front-end Workflow
addyosmani
1366
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
A Philosophy of Restraint
colly
203
16k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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