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
190
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
670
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
120
Other Decks in Design
See All in Design
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
110
ウェブディレクターを救うBacklog
wattlaa
0
310
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
650
文化に寄りそうデザイン
recruitengineers
PRO
4
930
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.4k
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
5
2.2k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
260
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
590
Goodpatch Tour💙 / We are hiring!
goodpatch
28
700k
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
870
Featured
See All Featured
Building Adaptive Systems
keathley
32
1.9k
Bash Introduction
62gerente
605
210k
Fireside Chat
paigeccino
22
2.6k
A Philosophy of Restraint
colly
197
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Designing for humans not robots
tammielis
247
25k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
GitHub's CSS Performance
jonrohan
1025
450k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
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