Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Star Workshop CSS - JSDay Canarias 2018

Manz
November 10, 2018

Star Workshop CSS - JSDay Canarias 2018

Manz

November 10, 2018
Tweet

More Decks by Manz

Other Decks in Programming

Transcript

  1. 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 */
  2. 55 5 96 27 86 0 85 20 116 26

    75 91 156 70 195 0
  3. 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') … };
  4. 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)
  5. 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)
  6. La imagen se adapta al tamaño del contenedor padre max-width

    Establece un tamaño máximo de ancho .image { max-width: 100%; }
  7. 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 { … } }
  8. 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
  9. 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; }
  10. CSS Flexbox Cajas flexibles en CSS .padre { display: flex;

    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
  11. CSS Flexbox Cajas flexibles en CSS .padre { display: flex;

    justify-content: space-between; align-items: flex-end; } .padre { display: flex; justify-content: space-around; align-items: flex-end; }
  12. 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
  13. CSS Triangle ¿Un triángulo con CSS? .triangle { width: 0;

    height: 0; border: 25px solid transparent; border-top-color: #f1af16; }
  14. 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
  15. 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)
  16. CSS Position Posicionamiento relativo .elemento { position: relative; top: 20px;

    left: -20px; } 20px 20px .elemento { position: absolute; top: 0; left: 0; } .padre (relative)
  17. CSS Before/After Pseudo elementos (contenido generado) .thumbs::before { content: '3♥';

    position: absolute; top: 10px; left: 10px; } ::after (absolute) (relative) .thumbs ::before (absolute)
  18. 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()
  19. 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
  20. 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
  21. 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/
  22. 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 */
  23. 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
  24. 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
  25. 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.
  26. 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
  27. 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
  28. 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
  29. 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);
  30. 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; }
  31. Canvas ¡Dibujar en un lienzo! #galaxy { position: absolute; top:

    0; left: 0; width: 100vw; height: 100vh; z-index: 0; } VHS canvas
  32. 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), }
  33. 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