Star Workshop CSS - JSDay Canarias 2018

J. Román Hdez @Manz StarWorkShop CSS Clone Wars

StarWorkShop bit.ly/cssjsday

twitter.com/manz He trabajado / colaborado con

Requisitos para el taller ¡Necesitas tenerlos instalados! NodeJS 8+ Git
Inkscape VSCode

Plantilla con Parcel https://github.com/ManzDev/starworkshop-jsday $ git clone https://github.com/ManzDev/starworkshop-jsday $ cd
starworkshop-jsday $ rm -rf .git $ npm install

Localización de los ficheros https://github.com/ManzDev/starworkshop-jsday reto1/ index.pcss index.js index.html

Scripts de NPM https://github.com/ManzDev/starworkshop-jsday npm run dev npm run build
npm run deploy

Otras alternativas Para trabajar en el taller codepen.io webpack

global.pcss ¡Todos los retos tienen código común! :root { }
/* Se aplica a la etiqueta HTML raíz (generalmente, <html> ) */ body { } /* Reseteos (márgenes o evitar scroll) */ .container { } /* Un fondo gris ocupará toda la pantalla y centrará el contenido */

55 5 96 27 86 0 85 20 116 26
75 91 156 70 195 0

Reto #1 Tarjeta (Card) CSS

.container .card .image div h2 p .ok .cancel

EMMET Atajos para construcción HTML rápida .card .card>img.image .card>div*4

EMMET Atajos para construcción HTML rápida .card>img.image+(div>h2+p)+button.ok+button.cancel img.image[src="./mountain.jpg" alt="A mountain"]

postcss-font-magician Importa las tipografías de Google Fonts "automágicamente" font-family: 'Scope
One', sans-serif; @font-face { font-family: "Scope One"; src: local('Scope One'), url('//scope-one.woff2') format('woff2') … url('//scope-one.woff') format('woff') … };

.card .image { } postcss-nesting Permite anidar CSS en PostCSS
.card { & .image { /* … */ } };

font-size: 2rem; font-size: 1.5rem; rem units Unidades relativas "em" :root
{ font-size: 22px; } 44px 33px

grados (dirección) CSS Gradients Lineales o radiales lista de colores
(se pueden añadir más) .card { background-image: linear-gradient( 22deg, #fff, #aaa); } cada color puede llevar un parámetro opcional (la longitud de ese color del gradiente)

desplazamiento en X CSS Shadows Sombras en "cajas" color de
la sombra (usa RGBA con c. alfa) .card { box-shadow: 5px 5px 10px #111); } desenfoque (Más alto, más desenfoque) desplazamiento en Y inset (sombra "interna") factor de crecimiento (Más alto, más grande)

La imagen se adapta al tamaño del contenedor padre max-width
Establece un tamaño máximo de ancho .image { max-width: 100%; }

CSS Custom Properties No son simplemente variables CSS (Cascada) button
{ background: linear-gradient(2deg, var(--button-color-top), var(--button-color-bottom)); &.ok { --button-color-top: #9088ec; --button-color-bottom: #665ce6; } &.cancel { … } }

postcss-color-mod-function Modificar un color con ciertas características .ok:hover { background:
color-mod(#9088ec lightness(30%)); } https://www.w3.org/TR/css-color-4/#modifying-colors

tilt.js https://micku7zu.github.io/vanilla-tilt.js/ import tilt from 'vanilla-tilt'; const card = document.querySelector('.card');
const options = {}; tilt.init(card, options);

Reto #2 Pingüino CSS/JS que sigue con ojos al ratón

CSS Flexbox Cajas flexibles en CSS justify-content align-items .padre .hijo

CSS Flexbox Cajas flexibles en CSS .padre { display: flex;
justify-content: center; align-items: center; } .padre { display: flex; justify-content: flex-start; align-items: flex-end; }

justify-content: flex-start; align-items: flex-end; } .padre { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; } row (default) column

justify-content: space-between; align-items: flex-end; } .padre { display: flex; justify-content: space-around; align-items: flex-end; }

CSS Calc Realiza operaciones .elemento { --size: 200px; width: calc(var(--size)
* 2); /* 400px */ } ...o incluso mezclar unidades a priori incompatibles: por ejemplo, una suma de porcentajes + píxeles

CSS Triangle ¿Un triángulo con CSS? .triangle { width: 0;
height: 0; border: 25px solid transparent; border-top-color: #f1af16; }

Transiciones CSS Suavizando cambios .elemento { background: red; transition: background
1.5s; &:hover { background: blue } } 1.5 seg

Transformaciones CSS Moviendo cosas con la GPU .pupil { width:
var(--pupil-size); height: var(--pupil-size); transform: translate(var(--eye-x), var(--eye-y)); transition: transform 0.5s ease; } --eye-y : 0 --eye-x : 0

Cambiar varCSS desde JS ¡Cambiando Custom Properties desde JS! const
leftEye = document.querySelector('.left.eye'); leftEye.style.setProperty('--eye-x', `${x}px`); --eye-x : -10 --eye-y : 0 leftEye.getBoundingClientRect().x event.clientX (onMouseMove event)

Reto #3 Carta 3D girando

.container .card-container .card .back .animation .card .front .thumbs .hide .animation
♥ .items ♥ ♥

CSS Position Posicionamiento relativo .elemento { position: relative; top: 20px;
left: -20px; } 20px 20px .elemento { position: absolute; top: 0; left: 0; } .padre (relative)

CSS Before/After Pseudo elementos (contenido generado) .thumbs::before { content: '3♥';
position: absolute; top: 10px; left: 10px; } ::after (absolute) (relative) .thumbs ::before (absolute)

Animaciones CSS Animar elementos con CSS @keyframes spin { 0%
{ transform: rotateY(0) rotateX(2deg) rotateY(5deg); } 100% { transform: rotateY(-360deg) rotateX(2deg) rotateY(5deg); } } .animation { animation: spin 5s linear infinite; } .hide { backface-visibility: hidden; } rotateY() rotateX() rotateZ()

Reto #4 Javascript guy

.container .js-guy .legs .left .js-body JS span .right

Font Face Tipografías que no están en Google Fonts @font-face
{ font-family: 'Neutra Text'; src: local('Neutra Text'), url('neutra.woff2') format('woff2'), url('neutra.woff') format('woff'), url('neutra.ttf') format('truetype'), } .js-body { font-family: 'Neutra Text', sans-serif; font-size: 172px; } JS

Z-index Profundidad en capas CSS .capa-frontal { position: relative; z-index:
2; } .capa-trasera { position: relative; z-index: 1; } /* Para que z-index funcione, position debe ser diferente a static (valor por defecto) */ 1 2

SVG Gráficos vectoriales en una web $ svgo leg.svg -p
0 --pretty -o leg.min.svg leg:svg: Done in 51 ms! 2.102 KiB - 90% = 0.21 KiB SVGO https://github.com/svg/svgo https://jakearchibald.github.io/svgomg/

Howler.js Audio fácil y rápido en web import thugSong from
'./thug-life.mp3'; import { Howl } from 'Howler'; const audio = new Howl({ src: [thugSong], loop: true, volume: 0.5, }); audio.play(); let id; … id = audio.play(id); /* No crea nuevas instancias de audio */

Reto #5 Vinilo de Pink Floyd

.container .prism (SVG inline) .box .stick .vinyl .rainbow .light

Selector + Elemento que está a continuación .box + .vinyl
{ position: relative; left: -200px; z-index: 1; transform: rotateZ(180deg); } .vinyl .box:hover + .vinyl { left: 100px; transform: rotateZ(180deg); } .box rotateZ() left

Perspective Profundidad y perspectiva en CSS .box { perspective: 10em;
} .rainbow { transform: rotateX(35deg); } /* Si aumentamos y reducimos los valores, veremos el efecto de profundidad */ .rainbow .box

Fader con Howler Jugando con el audio const audio =
new Howl({ src: [timeSong], loop: true, seek: 54, volume: 0, }); const playMusic = () => { id = audio.play(id); audio.fade(0, 1, 2000, id); }; fade(from, to, duration, [id]) from: Number Volume to fade from (0.0 to 1.0). to: Number Volume to fade to (0.0 to 1.0). duration: Number Time in milliseconds to fade. id: Number optional The sound ID. If none is passed, all sounds.

Reto #6 Panel de control de Kitt (Knight Rider)

5 rows 3 cols

.container .yellow .kitt-panel .yellow .voice- container .yellow .yellow .red .red
.red .red .red .red .low- panel

Grid CSS Cuadrículas o "rejillas" CSS .kitt-panel { display: grid;
grid-template-rows: repeat(5, 1fr); grid-template-columns: 1fr 3fr 1fr; grid-gap: 60px 20px; } .kitt-panel { width: 600px; height: 600px; } 1fr 1fr 3fr

Grid CSS Cuadrículas o "rejillas" CSS .voice-container { grid-row: 1
/ span 3; grid-column: 2; } 1 .yellow .yellow .voice- container .yellow .yellow .red .red .red .red .red .red .low- panel 2 3 1 2 3 4 5

Grid CSS Cuadrículas o "rejillas" CSS .low-panel { grid-row: 4
/ span 2; grid-column: 2; } .yellow .yellow .voice- container .yellow .yellow .red .red .red .red .red .red .low- panel 1 2 3 1 2 3 4 5

17 rows x 3 cols 3 rows x 2 cols

.voice-container .voice .cell .cell .cell .low-panel .low-grid .big.green .darky .big.yellow
.darky .big.red .darky .off

Kitt cells Celdas del simulador de voz de Kitt .cell[data-color="0"]
{ background: #200000; } .cell[data-color="1"] { background: #4d0000; } .cell[data-color="2"] { background: #8d0000; } /* No se usa */ .cell[data-color="3"] { background: #fa0000; } renderKitt(4); paintKitt(0, 3); paintKitt(1, 4); paintKitt(2, 3); 20ms 4 } setInterval(fx, ms);

Reto #7 VHS de StarWars en el espacio

.container .vhs .top .center #galaxy .tape.a .film .circle .tape.b .film
.circle .label

CSS Overflow Ocultar desbordamiento en el "interior" de una etiqueta
.tape { width: 150px; height: 150px; background: black; overflow: hidden; } .circle .tape .circle { width: 400px; height: 400px; border-radius: 50%; background: blue; }

Canvas ¡Dibujar en un lienzo! #galaxy { position: absolute; top:
0; left: 0; width: 100vw; height: 100vh; z-index: 0; } VHS canvas

Canvas ¡Dibujar en un lienzo! const C = ['#444', '#888',
'#fff']; const STAR = { x: rnd(0, canvas.width), y: rnd(0, canvas.height), speed: rnd(1, MAX_SPEED), color: rnd(0, C.length), }

Reto #8 Cartucho de Super Mario Bros (NES)

bricks.png fireball.png seal.png wash.png mario.png

Pretendo La tipografía de Nintendo ¿Eres capaz de encontrarla y
convertirla a los formatos necesarios?

CSS Clip-path ¡Recortes personalizados en CSS! .tape { clip-path: polygon(50%
0%, 0% 100%, 100% 100%); } (50%, 0%) (x, y) (0%, 100%) (100%, 100%) Tool: Clippy

¡Gracias! José Román Hdez @Manz

Star Workshop CSS - JSDay Canarias 2018

Star Workshop CSS - JSDay Canarias 2018

More Decks by Manz

Other Decks in Programming

Featured

Transcript