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
290
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.6k
Diseño Más Responsive con WordPress
silocreativo
0
1.1k
Diseñando una mejor Experiencia Ecommerce en Responsive
silocreativo
0
1.8k
Diseño responsive y accesibilidad con WordPress: usuario vs pixel
silocreativo
1
730
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
180
Other Decks in Design
See All in Design
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
460
mento Design Team Portfolio
mento0fficial
1
890
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
740
Goodpatch Tour💙 / We are hiring!
goodpatch
31
900k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
210
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
130
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
510
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
420
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Statistics for Hackers
jakevdp
799
220k
The Invisible Side of Design
smashingmag
302
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The Language of Interfaces
destraynor
162
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
How to Ace a Technical Interview
jacobian
280
24k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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