├── .gitignore ├── 10-css-tips ├── README.md ├── center-flexbox-grid │ ├── README.md │ ├── index.html │ └── styles.css ├── cursor-property │ ├── README.md │ ├── index.html │ └── styles.css ├── custom-highlight-selection │ ├── index.html │ └── styles.css ├── height-transitions │ ├── README.md │ ├── index.html │ └── styles.css ├── object-fit │ ├── index.html │ └── styles.css ├── toggle-switch │ ├── README.md │ ├── index.html │ └── styles.css ├── triangles │ ├── README.md │ ├── index.html │ └── styles.css ├── truncate-text-ellipsis │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── underline-animation │ ├── README.md │ ├── index.html │ └── styles.css └── writing-mode │ ├── index.html │ └── styles.css ├── Multiple-drop-shadows ├── README.md ├── index.html └── style.css ├── README.md ├── Responsive-layout ├── README.md ├── index.html ├── script.js └── styles.css ├── blend-modes ├── README.md ├── img │ ├── pinneaple 2.svg │ └── pinneaple.svg ├── index.html └── style.css ├── clip-path ├── README.md ├── img │ ├── pinneaple 2.svg │ └── pinneaple.svg ├── index.html └── style.css ├── columns-property ├── README.md ├── index.html └── style.css ├── countdown-to-new-year ├── README.md ├── index.html ├── script.js └── styles.css ├── data-list ├── README.md ├── index.html └── styles.css ├── fluid-typography ├── README.md ├── index.html └── style.css ├── gradient-text ├── README.md ├── index.html └── styles.css ├── mix-bled-mode-II ├── README.md ├── index.html ├── script.js └── style.css ├── perspective-text ├── README.md ├── index.html └── style.css ├── random-color ├── README.md ├── index.html ├── script.js └── styles.css ├── shape-outside ├── README.md ├── img │ ├── shpe 2.svg │ ├── shpe.svg │ ├── yoga 2.png │ └── yoga.png ├── index.html └── style.css ├── starwars-intro-animation ├── README.md ├── index.html └── styles.css ├── svg-animation ├── README.md ├── index.html ├── script.js └── styles.css ├── tag-sub-sup-html ├── README.md ├── index.html └── style.css ├── variable-fonts ├── README.md ├── index.html └── style.css ├── where-is-pseudo-classes ├── README.md ├── img │ ├── Group 1 2.svg │ ├── Group 1.svg │ ├── Group 3.svg │ ├── Group 4.svg │ ├── Group 6.svg │ ├── Group 7.svg │ ├── ilustration 2.svg │ └── ilustration.svg ├── index.html └── styles.css └── z-index ├── README.md ├── index.html ├── scripts.js └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /10-css-tips/README.md: -------------------------------------------------------------------------------- 1 | # 10 simples tips de CSS 2 | 3 | Pequeños efectos pueden marcar la diferencia en la experiencia del usuario y puedes lograrlo con CSS. 4 | Aquí encontraras tips muy sencillos que te ayudaran en tus desarrollos. 5 | 6 | - [1.Height-transition demo](https://www.youtube.com/watch?v=0U9FKMCdjDM&t=19s) 7 | - [2.Toggle switch demo](https://youtu.be/a_o0y2c67ZI) 8 | - [3.underline animation demo](https://youtu.be/wQx6fIkmJpM) 9 | - [4.triangles demo](https://youtu.be/Zd2xjVtIFj8) 10 | - [5.center with flexbox and grid demo](https://youtu.be/5t7mgsZgfP8) 11 | - [6.truncate-text demo](https://youtu.be/1_A-97JCwBY) 12 | - [7.cursor-property demo](https://youtu.be/l_EM9uw4dwo) 13 | - [8.custom-highlight-selection demo](https://youtu.be/bCG-10ghfGI) 14 | - [9.writing-mode demo](https://youtu.be/zcndIrZkaxM) 15 | 16 | ### Repo: 17 | 18 | - [Height-transition](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/height-transitions) 19 | - [2.Toggle-switch](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/toggle-switch) 20 | - [3.underline-animation](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/underlome-animation) 21 | - [4.triangles](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/triangles) 22 | - [5.center with flexbox and grid](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/center-flexbox-grid) 23 | - [6.truncate-text](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/truncate-text-ellipsis) 24 | - [7.cursor-property](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/cursor-property) 25 | - [8.custom-highlight-selection](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/custom-highlight-selection) 26 | - [9.writing-mode](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/writing-mode) 27 | - [10.object-fit](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/object-fit) 28 | -------------------------------------------------------------------------------- /10-css-tips/center-flexbox-grid/README.md: -------------------------------------------------------------------------------- 1 | # Center with Flexbox and CSS Grid 2 | 3 | - [demo](https://youtu.be/5t7mgsZgfP8) 4 | -------------------------------------------------------------------------------- /10-css-tips/center-flexbox-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Align center with flexbox & CSS grid 8 | 9 | 10 | 11 | 12 | 13 |

How to align center with flexbox and css grid

14 |
15 |
Center me
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /10-css-tips/center-flexbox-grid/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #110921; 3 | --purple: #3720b4; 4 | --green: #5ff8c2; 5 | --font: "Roboto Mono", sans-serif; 6 | } 7 | 8 | html { 9 | font-size: 10px; 10 | } 11 | 12 | body { 13 | font-size: 10px; 14 | background-color: var(--bg); 15 | font-family: var(--font); 16 | padding: 10rem 0; 17 | color: white; 18 | } 19 | 20 | h1 { 21 | font-size: 3vw; 22 | text-align: center; 23 | } 24 | 25 | .flex-container { 26 | border-radius: 6rem; 27 | border: 0.6rem solid var(--green); 28 | height: 500px; 29 | margin: 0 auto; 30 | padding: 2rem; 31 | width: 70%; 32 | 33 | display: grid; 34 | place-items: center; 35 | } 36 | 37 | .flex-item { 38 | background-color: var(--green); 39 | border-radius: 3rem; 40 | color: var(--purple); 41 | display: inline-block; 42 | font-size: 2.6rem; 43 | padding: 3rem 4rem; 44 | } 45 | -------------------------------------------------------------------------------- /10-css-tips/cursor-property/README.md: -------------------------------------------------------------------------------- 1 | # Cursor property 2 | 3 | la propiedad cursor en css controla cómo se verá el cursor del mouse cuando se encuentre sobre el elemento en el que se establece la propiedad. 4 | 5 | Conoce los Diferentes valores que puede tener estate propiedad 6 | 7 | - [](https://youtu.be/l_EM9uw4dwo) 8 | 9 | - [Cursor property demo](https://youtu.be/l_EM9uw4dwo) 10 | -------------------------------------------------------------------------------- /10-css-tips/cursor-property/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cursor properties 8 | 9 | 10 | 11 | 12 | 13 |
14 |

CSS Cursor properties

15 | 16 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /10-css-tips/cursor-property/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: #fff; 3 | --blue: #4763ef; 4 | --green: #4cffec; 5 | --blue-dark: #1e2345; 6 | --ocean: #09d3ef; 7 | --font: "Roboto Mono", sans-serif; 8 | } 9 | 10 | html { 11 | font-size: 10px; 12 | } 13 | 14 | body { 15 | font-size: 10px; 16 | background-color: var(--blue); 17 | font-family: var(--font); 18 | padding: 8rem 12rem 0; 19 | } 20 | 21 | h1 { 22 | font-size: 4rem; 23 | color: white; 24 | text-align: center; 25 | margin-bottom: 8rem; 26 | } 27 | 28 | .cursors { 29 | display: grid; 30 | grid-gap: 4rem; 31 | grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 32 | } 33 | 34 | .cursors > li { 35 | padding: 2.8rem 2rem; 36 | border-radius: 1rem; 37 | list-style: none; 38 | background: var(--green); 39 | text-align: center; 40 | font-size: 2rem; 41 | color: var(--blue-dark); 42 | box-shadow: 6px 8px 0px 0 var(--ocean), 12px 14px 0px 0 var(--blue-dark); 43 | transition: all 0.4s ease-in-out; 44 | } 45 | .cursors > li:hover { 46 | transform: translateY(2px); 47 | box-shadow: 4px 6px 0px 0 var(--ocean), 8px 10px 0px 0 var(--blue-dark); 48 | } 49 | 50 | .auto { 51 | cursor: auto; 52 | } 53 | 54 | .default { 55 | cursor: default; 56 | } 57 | 58 | .none { 59 | cursor: none; 60 | } 61 | 62 | .context-menu { 63 | cursor: context-menu; 64 | } 65 | 66 | .help { 67 | cursor: help; 68 | } 69 | 70 | .pointer { 71 | cursor: pointer; 72 | } 73 | 74 | .progress { 75 | cursor: progress; 76 | } 77 | 78 | .wait { 79 | cursor: wait; 80 | } 81 | 82 | .cell { 83 | cursor: cell; 84 | } 85 | 86 | .crosshair { 87 | cursor: crosshair; 88 | } 89 | 90 | .text { 91 | cursor: text; 92 | } 93 | 94 | .vertical-text { 95 | cursor: vertical-text; 96 | } 97 | 98 | .alias { 99 | cursor: alias; 100 | } 101 | 102 | .copy { 103 | cursor: copy; 104 | } 105 | 106 | .move { 107 | cursor: move; 108 | } 109 | 110 | .not-allowed { 111 | cursor: not-allowed; 112 | } 113 | 114 | .all-scroll { 115 | cursor: all-scroll; 116 | } 117 | 118 | .zoom-in{ 119 | cursor: zoom-in; 120 | } 121 | 122 | .zoom-out{ 123 | cursor: zoom-out; 124 | } 125 | 126 | .col-resize { 127 | cursor: col-resize; 128 | } 129 | 130 | .row-resize { 131 | cursor: row-resize; 132 | } 133 | 134 | .n-resize { 135 | cursor: n-resize; 136 | } 137 | 138 | .e-resize { 139 | cursor: e-resize; 140 | } 141 | 142 | .s-resize { 143 | cursor: s-resize; 144 | } 145 | 146 | .se-resize { 147 | cursor: se-resize; 148 | } 149 | 150 | .ne-resize { 151 | cursor: ne-resize; 152 | } 153 | 154 | 155 | .ew-resize { 156 | cursor: ew-resize; 157 | } 158 | 159 | .ns-resize { 160 | cursor: ns-resize; 161 | } 162 | .nesw-resize { 163 | cursor: nesw-resize; 164 | } -------------------------------------------------------------------------------- /10-css-tips/custom-highlight-selection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Select/Highlight 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Select/Highlight

15 |
16 |
17 |

This element has a purple selection color, please Highlight the text

18 | 19 |
20 |
21 |

This element has a green selection color, please Highlight the text

22 | 23 |
24 | 25 |
26 |

This element has a pink selection color, please Highlight the text

27 | 28 |
29 | 30 |
31 |

This element has a blue selection color, please Highlight the text

32 |
33 | 34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /10-css-tips/custom-highlight-selection/styles.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --bg: #110921; 4 | --bg-dark: #191c29; 5 | --bg-light: #dbebfa; 6 | --blue:#09d3ef ; 7 | --green: #5ff8c2; 8 | --pink: #9b29b7; 9 | --purple: #4763ef; 10 | --white: #fff; 11 | --font: 'Roboto Mono', sans-serif; 12 | } 13 | 14 | 15 | 16 | html { 17 | font-size: 10px; 18 | } 19 | 20 | body { 21 | background-color: var(--bg); 22 | padding: 10rem 20rem 0; 23 | font-size: 10px; 24 | font-family: var(--font); 25 | 26 | } 27 | 28 | h1 { 29 | font-size: 5rem; 30 | margin-bottom: 10rem; 31 | color: white; 32 | text-align: center; 33 | } 34 | 35 | .wrapper { 36 | display: grid; 37 | gap: 4rem; 38 | grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 39 | } 40 | 41 | @media screen and (max-width: 1140px) { 42 | body { 43 | padding: 10rem 10rem 0; 44 | } 45 | .wrapper { 46 | gap: 3rem; 47 | } 48 | 49 | } 50 | 51 | .card { 52 | background-color: var(--bg-dark); 53 | padding: 2.8rem; 54 | position: relative; 55 | } 56 | 57 | .card, 58 | .card::before { 59 | border-radius: 4rem; 60 | } 61 | 62 | .card::before, 63 | .card::after { 64 | content:''; 65 | position: absolute; 66 | z-index: -1; 67 | } 68 | 69 | .card::before { 70 | background-image: linear-gradient( 71 | 0deg, #5ddcff, #3c67e3 43%, #4e00c2); 72 | height: 102%; 73 | left: -1%; 74 | top: -1%; 75 | width: 102%; 76 | } 77 | 78 | .card::after { 79 | background-image: linear-gradient( 80 | 19deg, #5ddcff, #3c67e3 43%, #4e00c2); 81 | filter: blur(5rem); 82 | height: 90%; 83 | left: 0; 84 | right: 0; 85 | top: 0; 86 | width: 90%; 87 | } 88 | 89 | p { 90 | font-size: 1.8rem; 91 | line-height: 2.6rem; 92 | color: white; 93 | } 94 | 95 | p span { 96 | padding: 0 0.4rem; 97 | } 98 | 99 | .card-purple p::selection, 100 | .card-purple span { 101 | background-color: var(--purple); 102 | } 103 | 104 | .card-green p::selection, 105 | .card-green span { 106 | background-color: var(--green); 107 | color: var(--bg-dark); 108 | } 109 | 110 | .card-pink p::selection, 111 | .card-pink span { 112 | background-color: var(--pink); 113 | } 114 | 115 | .card-blue p::selection, 116 | .card-blue span { 117 | background-color: var(--blue); 118 | color: var(--bg-dark); 119 | } -------------------------------------------------------------------------------- /10-css-tips/height-transitions/README.md: -------------------------------------------------------------------------------- 1 | # Height transition 2 | 3 | - [Height-transition demo](https://www.youtube.com/watch?v=0U9FKMCdjDM&t=19s) 4 | -------------------------------------------------------------------------------- /10-css-tips/height-transitions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | height transition 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Hover for height animate

15 |
16 |

For animate the "height" of element with CSS Transitions you need use "max-height" property.

17 |

Para animar la altura de un elemento con transiciones CSS, necesitas usar la propiedad "max-height".

18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /10-css-tips/height-transitions/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: #fff; 3 | --blue: #4763ef; 4 | --font: 'Roboto Mono', sans-serif; 5 | } 6 | 7 | html { 8 | font-size: 10px; 9 | } 10 | 11 | body { 12 | font-size: 10px; 13 | background-color: var(--blue); 14 | font-family: var(--font); 15 | padding: 6rem 0; 16 | display: flex; 17 | justify-content: center; 18 | } 19 | 20 | .card { 21 | background-color: var(--white); 22 | border-radius: 3rem; 23 | display: inline-block; 24 | font-size: 2rem; 25 | padding: 4rem; 26 | width: 60%; 27 | } 28 | 29 | .card h2 { 30 | font-size: 3rem; 31 | color: var(--blue); 32 | } 33 | 34 | .card-content { 35 | overflow: hidden; 36 | max-height: 0; 37 | transition: max-height 0.6s linear; 38 | } 39 | 40 | .card:hover > .card-content { 41 | max-height: 300px; 42 | } 43 | -------------------------------------------------------------------------------- /10-css-tips/object-fit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Object fit 8 | 9 | 10 | 11 | 12 | 13 |
14 | 18 | 22 | 26 | 30 | 31 | 35 | 39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /10-css-tips/object-fit/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #110921; 3 | --bg-dark: #191c29; 4 | --bg-light: #dbebfa; 5 | --blue:#09d3ef ; 6 | --green: #5ff8c2; 7 | --pink: #9b29b7; 8 | --purple: #4763ef; 9 | --white: #fff; 10 | --font: 'Roboto Mono', sans-serif; 11 | } 12 | 13 | .wrapper { 14 | display: grid; 15 | gap: 10px; 16 | grid-template-columns: repeat(3, 1fr); 17 | grid-template-rows: repeat(6, 200px); 18 | } 19 | 20 | img:nth-child(1){ 21 | grid-column: 1 /3; 22 | grid-row: 1 / 3; 23 | } 24 | 25 | img:nth-child(3){ 26 | grid-column: 3; 27 | grid-row: 2 / 4; 28 | } 29 | 30 | img:nth-child(4){ 31 | grid-row: 3 / 6; 32 | } 33 | 34 | img:nth-child(6){ 35 | grid-column: 2 / 4; 36 | grid-row: 4 / 6; 37 | } 38 | 39 | img { 40 | width: 100%; 41 | height: 100%; 42 | object-fit: cover; 43 | } 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /10-css-tips/toggle-switch/README.md: -------------------------------------------------------------------------------- 1 | # Toggle switch 2 | 3 | - [Toggle switch demo](https://youtu.be/a_o0y2c67ZI) 4 | -------------------------------------------------------------------------------- /10-css-tips/toggle-switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Toggle Switch 8 | 9 | 10 | 11 | 12 | 13 |

Toggle Switch

14 |
15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /10-css-tips/toggle-switch/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #110921; 3 | --purple: #3720b4; 4 | --green: #5ff8c2; 5 | --font: 'Roboto Mono', sans-serif; 6 | } 7 | 8 | html { 9 | font-size: 10px; 10 | } 11 | 12 | body { 13 | font-size: 10px; 14 | background-color: var(--bg); 15 | font-family: var(--font); 16 | padding: 10rem 0; 17 | text-align: center; 18 | color: white; 19 | } 20 | 21 | h1 { 22 | font-size: 3vw; 23 | } 24 | .wrap-toggle { 25 | padding: 5rem; 26 | } 27 | 28 | .switch { 29 | position: relative; 30 | display: inline-block; 31 | width: 80px; 32 | height: 40px; 33 | background-color: var(--purple); 34 | border-radius: 40px; 35 | transition: all 0.3s; 36 | cursor: pointer; 37 | } 38 | 39 | .switch:after { 40 | content: ''; 41 | position: absolute; 42 | width: 30px; 43 | height: 30px; 44 | border-radius: 30px; 45 | background-color: white; 46 | top: 5px; 47 | left: 5px; 48 | transition: all 0.3s; 49 | } 50 | 51 | input[type='checkbox']:checked + .switch:after { 52 | transform: translateX(40px); 53 | background-color: var(--bg); 54 | } 55 | 56 | input[type='checkbox']:checked + .switch { 57 | background-color: var(--green); 58 | } 59 | 60 | .offscreen { 61 | position: absolute; 62 | left: -9999px; 63 | } 64 | -------------------------------------------------------------------------------- /10-css-tips/triangles/README.md: -------------------------------------------------------------------------------- 1 | # Triangles con CSS 2 | 3 | Es muy comun utilizar triangulos cuando estamos desarrolando, como por ejemplo tenemos un elemento y cuando hagamos hover sale un tooltip y ese tooltip tiene un pequeño triangulo que te ayuda a señalar el elemento. 4 | existen diferentes maneras de hacerlo, una de ellas es utilizando los bordes de un elemento. 5 | 6 | - [triangles demo](https://youtu.be/Zd2xjVtIFj8) 7 | -------------------------------------------------------------------------------- /10-css-tips/triangles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Triangles shapes 8 | 9 | 10 | 11 | 12 | 13 |

CSS Triangles

14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /10-css-tips/triangles/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #110921; 3 | --blue-dark: #4763ef; 4 | --orange: #e86e3c; 5 | --green: #84f8cf; 6 | --ocean: #06cae4; 7 | --font: "Roboto Mono", sans-serif; 8 | } 9 | 10 | html { 11 | font-size: 10px; 12 | } 13 | 14 | body { 15 | font-size: 10px; 16 | background-color: var(--bg); 17 | font-family: var(--font); 18 | padding: 10rem 0 0; 19 | text-align: center; 20 | color: white; 21 | } 22 | 23 | h1 { 24 | font-size: 3vw; 25 | } 26 | 27 | .wrap { 28 | padding: 10rem 0; 29 | display: flex; 30 | align-items: center; 31 | justify-content: center; 32 | gap: 4rem; 33 | } 34 | 35 | .main-triangle { 36 | width: 0; 37 | height: 0; 38 | border: 60px solid var(--blue-dark); 39 | border-right-color: var(--ocean); 40 | border-bottom-color: var(--green); 41 | border-left-color: var(--orange); 42 | } 43 | 44 | .triangle { 45 | width: 0; 46 | height: 0; 47 | } 48 | 49 | .triangle-up { 50 | border-bottom: 60px solid var(--green); 51 | border-left: 60px solid transparent; 52 | border-right: 60px solid transparent; 53 | } 54 | 55 | .triangle-down { 56 | border-top: 60px solid var(--blue-dark); 57 | border-left: 60px solid transparent; 58 | border-right: 60px solid transparent; 59 | } 60 | 61 | .triangle-left { 62 | border-right: 60px solid var(--ocean); 63 | border-top: 60px solid transparent; 64 | border-bottom: 60px solid transparent; 65 | } 66 | 67 | .triangle-right { 68 | border-left: 60px solid var(--orange); 69 | border-top: 60px solid transparent; 70 | border-bottom: 60px solid transparent; 71 | } 72 | 73 | .card { 74 | width: 300px; 75 | height: 150px; 76 | background-color: white; 77 | position: relative; 78 | } 79 | 80 | .card::before { 81 | content: ""; 82 | width: 0; 83 | height: 0; 84 | border-bottom: 10px solid white; 85 | border-left: 10px solid transparent; 86 | border-right: 10px solid transparent; 87 | position: absolute; 88 | bottom: 100%; 89 | } 90 | -------------------------------------------------------------------------------- /10-css-tips/truncate-text-ellipsis/README.md: -------------------------------------------------------------------------------- 1 | # Truncate text 2 | 3 | - [demo]() 4 | -------------------------------------------------------------------------------- /10-css-tips/truncate-text-ellipsis/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Truncate text with ellipsis 8 | 9 | 10 | 11 | 12 | 13 |

Truncate text with ellipsis

14 |
15 |
16 |

17 | Sometimes we required to adjust long strings in one line and show ellipsis(...) at the end of the string as a 18 | symbol that this text is long 19 |

20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 |

width:

28 |
29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /10-css-tips/truncate-text-ellipsis/script.js: -------------------------------------------------------------------------------- 1 | const wrapper = document.querySelector(".wrapper"); 2 | const textWidth = document.querySelector(".width-value"); 3 | const slider = document.querySelector("[type=range]"); 4 | 5 | // const text = document.querySelector(".truncate"); 6 | 7 | slider.addEventListener("input", (e) => { 8 | const value = `${e.target.value}px`; 9 | wrapper.style.width = value; 10 | textWidth.innerHTML = value; 11 | }); 12 | textWidth.innerHTML = `${wrapper.clientWidth}px`; 13 | 14 | // const textContent = text.textContent; 15 | 16 | // const truncateString = (str, num) => { 17 | // if (str.length <= num) { 18 | // return str; 19 | // } 20 | // return `${str.slice(0, num)} ...`; 21 | // }; 22 | 23 | // text.innerHTML = truncateString(textContent, 50); 24 | -------------------------------------------------------------------------------- /10-css-tips/truncate-text-ellipsis/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #332c67; 3 | --purple: #5846a6; 4 | --green: #77be85; 5 | --pink: #df888e; 6 | --font: "Roboto Mono", sans-serif; 7 | } 8 | 9 | html { 10 | font-size: 10px; 11 | } 12 | 13 | * { 14 | box-sizing: border-box; 15 | } 16 | 17 | body { 18 | font-size: 10px; 19 | background-color: var(--bg); 20 | font-family: var(--font); 21 | padding: 10rem 0; 22 | text-align: center; 23 | color: white; 24 | display: grid; 25 | place-items: center; 26 | } 27 | 28 | h1 { 29 | font-size: 3vw; 30 | margin-bottom: 20rem; 31 | } 32 | 33 | input[type="range"] { 34 | -webkit-appearance: none; 35 | border-radius: 3rem; 36 | } 37 | 38 | input[type="range"]::-webkit-slider-runnable-track { 39 | width: 300px; 40 | height: 5px; 41 | background: #ddd; 42 | border: none; 43 | border-radius: 5px; 44 | } 45 | 46 | input[type="range"]::-webkit-slider-thumb { 47 | -webkit-appearance: none; 48 | border: none; 49 | height: 16px; 50 | width: 16px; 51 | border-radius: 50%; 52 | background: var(--green); 53 | margin-top: -5px; 54 | } 55 | 56 | input[type="range"]:focus { 57 | outline: none; 58 | } 59 | 60 | input[type="range"]:focus::-webkit-slider-runnable-track { 61 | background: #ccc; 62 | } 63 | 64 | .width-value { 65 | margin-left: 5px; 66 | font-size: 1.8rem; 67 | } 68 | 69 | .card { 70 | background-color: var(--purple); 71 | border-radius: 1.2rem; 72 | position: relative; 73 | grid-column: 1; 74 | grid-row: 1; 75 | transform-origin: top center; 76 | transition: all 0.4s cubic-bezier(0.5, 0.35, 0.15, 1.4); 77 | cursor: pointer; 78 | width: inherit; 79 | padding: 4rem; 80 | z-index: 2; 81 | } 82 | 83 | .card p { 84 | font-size: 16px; 85 | } 86 | 87 | .card-middle { 88 | content: ""; 89 | background-color: var(--green); 90 | position: absolute; 91 | transform: rotate(4deg) translate(0, 4px); 92 | position: relative; 93 | z-index: 1; 94 | } 95 | 96 | .card-back { 97 | background-color: var(--pink); 98 | transform: rotate(-4deg) translate(3px, 5px); 99 | z-index: 0; 100 | } 101 | 102 | .wrapper:hover .card { 103 | transform: rotate(0); 104 | } 105 | 106 | .wrapper:hover .card-middle { 107 | transform: translate(2px, -2px); 108 | } 109 | 110 | .wrapper:hover .card-back { 111 | transform: translate(-2px, 2px); 112 | } 113 | 114 | .range { 115 | margin-top: 5rem; 116 | display: flex; 117 | justify-content: center; 118 | gap: 2rem; 119 | } 120 | .range p { 121 | font-size: 1.4rem; 122 | } 123 | .wrapper { 124 | display: grid; 125 | width: 500px; 126 | } 127 | 128 | /* styles to truncate the text */ 129 | .truncate { 130 | white-space: nowrap; 131 | overflow: hidden; 132 | text-overflow: ellipsis; 133 | } 134 | -------------------------------------------------------------------------------- /10-css-tips/underline-animation/README.md: -------------------------------------------------------------------------------- 1 | # Underline-animation 2 | 3 | - [demo](https://youtu.be/h72c2QLXs3A) 4 | -------------------------------------------------------------------------------- /10-css-tips/underline-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | height transition 8 | 9 | 10 | 11 | 12 | 13 |

Hover me to underline

14 | 15 | 16 | -------------------------------------------------------------------------------- /10-css-tips/underline-animation/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: #fff; 3 | --bg: #dbebfa; 4 | --pink: #9b29b7; 5 | --blue-dark: #4763ef; 6 | --font: 'Roboto Mono', sans-serif; 7 | } 8 | 9 | html { 10 | font-size: 10px; 11 | } 12 | 13 | body { 14 | align-items: center; 15 | background-color: var(--bg); 16 | color: white; 17 | display: flex; 18 | font-size: 10px; 19 | font-family: var(--font); 20 | height: calc(100vh - 100px); 21 | justify-content: center; 22 | } 23 | 24 | .underline { 25 | color: var(--blue-dark); 26 | font-size: 6rem; 27 | display: inline-block; 28 | position: relative; 29 | } 30 | 31 | .underline:after { 32 | content: ''; 33 | position: absolute; 34 | width: 100%; 35 | transform: scaleX(0); 36 | height: 4px; 37 | bottom: 0; 38 | left: 0; 39 | background-color: var(--pink); 40 | transform-origin: bottom right; 41 | transition: transform 0.6s ease-out; 42 | } 43 | 44 | .underline:hover:after { 45 | transform: scaleX(1); 46 | transform-origin: bottom left; 47 | } 48 | -------------------------------------------------------------------------------- /10-css-tips/writing-mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Writing mode 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Change

16 |
17 |

comes one step

18 |

at a time

19 |
20 |

The writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language.

21 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit soluta maxime deserunt at sit, hic depending on the language

22 |
23 |
24 |

First paragraph The writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending

25 |

Second paragraph, consectetur adipisicing elit. Fugit soluta maxime , hic depending on the language

26 |

Third paragraph dolor sit amet, consectetur adipisicing elit. Fugit soluta maxime deserunt

27 |
28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /10-css-tips/writing-mode/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | --pink: #9b29b7; 4 | --blue-dark: #4763ef; 5 | --blue-light: #dbebfa; 6 | --yellow: #c5fa2d; 7 | --font: "Roboto Mono", sans-serif; 8 | } 9 | 10 | html { 11 | font-size: 10px; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | body { 19 | font-size: 10px; 20 | background-color: var(--blue-dark); 21 | font-family: var(--font); 22 | padding: 10rem 0; 23 | text-align: center; 24 | color: var(--blue-light); 25 | display: grid; 26 | place-items: center; 27 | } 28 | 29 | .flex { 30 | display: flex; 31 | text-align: start; 32 | width: 80%; 33 | margin: 0 auto; 34 | } 35 | 36 | h1 { 37 | color: var(--yellow); 38 | font-size: 9rem; 39 | text-transform: uppercase; 40 | margin: 0; 41 | } 42 | 43 | h2 { 44 | font-size: 7em; 45 | margin: 1.2rem 0 0 2rem; 46 | line-height: 6rem; 47 | color: var(--yellow); 48 | } 49 | 50 | p { 51 | font-size:2rem; 52 | margin: 3rem 2rem 0; 53 | } 54 | 55 | .wrapper-one { 56 | width: 45%; 57 | } 58 | 59 | .wrapper-two { 60 | height: 28%; 61 | } 62 | 63 | .vertical-lr { 64 | writing-mode: vertical-lr; 65 | text-orientation: upright; 66 | } 67 | 68 | .vertical-rl { 69 | writing-mode: vertical-rl; 70 | } 71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /Multiple-drop-shadows/README.md: -------------------------------------------------------------------------------- 1 | # Multiple drop shadow 2 | 3 | Con filter: drop-shadow de #CSS podemos agregar múltiples valores de drop-shadow y así lograr un efecto de múltiples sombras 4 | 5 | ![](https://media.giphy.com/media/pHr3r3ytgCYInQ9pZV/giphy.gif) 6 | 7 | En esta demo, podemos ver que al utilizar `filter: drop-shadow;` podemos agregar múltiples valores y jugando un poco con ellos podemos lograr este efecto. 8 | 9 | Lo genial de drop shadow es que la sombra que agreguemos se adapta a la forma del elemento. 10 | 11 | [youtube demo](https://www.youtube.com/watch?v=H5xUL7QX72I) 12 | 13 | ## Syntax 14 | 15 | ```syntax 16 | filter: drop-shadow(10rem 0 0 rgba(129, 238, 186, 0.8)) 17 | drop-shadow(-10rem 0 0 rgba(129, 228, 238, 0.8)) 18 | drop-shadow(20rem 0 0 rgba(92, 219, 207, 0.8)) 19 | drop-shadow(-20rem 0 0 rgba(0, 207, 255, 0.8)); 20 | ``` 21 | 22 | ## Links 23 | 24 | - [CSS-Tricks ](https://css-tricks.com/breaking-css-box-shadow-vs-drop-shadow/) 25 | -------------------------------------------------------------------------------- /Multiple-drop-shadows/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multiple drop shadows 8 | 9 | 10 | 11 | 12 |

Multiple drop shadows

13 | 14 |
15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Multiple-drop-shadows/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #1e2345; 3 | --light: #d9e8f0; 4 | } 5 | 6 | body { 7 | margin: 60px auto; 8 | text-align: center; 9 | background-color: var(--bg); 10 | color: var(--light); 11 | font-family: 'Open Sans', sans-serif; 12 | } 13 | 14 | h1 { 15 | font-size: 6vw; 16 | margin-bottom: 100px; 17 | } 18 | 19 | svg { 20 | width: 60%; 21 | transition: all 0.8s; 22 | } 23 | 24 | .main:hover svg { 25 | transform: rotate(90deg); 26 | } 27 | 28 | /* 29 | 30 | * 31 | * 32 | multiple drop shadows 33 | * 34 | * 35 | 36 | */ 37 | 38 | .main { 39 | filter: drop-shadow(0 0 0 rgba(129, 238, 186, 0.8)); 40 | transition: filter 0.8s ease-in-out; 41 | margin: 0 auto; 42 | width: 50%; 43 | } 44 | 45 | .main:hover { 46 | filter: drop-shadow(10rem 0 0 rgba(129, 238, 186, 0.8)) 47 | drop-shadow(-10rem 0 0 rgba(129, 228, 238, 0.8)) 48 | drop-shadow(20rem 0 0 rgba(92, 219, 207, 0.8)) 49 | drop-shadow(-20rem 0 0 rgba(0, 207, 255, 0.8)); 50 | } 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontips 2 | 3 | Frontips es una collección de tips de código HTML, CSS y JavaScritp. 4 | 5 | ## Serie 10 simples tips de CSS 6 | 7 | - [10.object-fit](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/object-fit) 8 | 9 | - [9.writing-mode](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/writing-mode) 10 | 11 | - [8.custom-highlight-selection](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/custom-highlight-selection) 12 | 13 | - [7.cursor-property](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/cursor-property) 14 | 15 | - [6.truncate-text](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/truncate-text-ellipsis) 16 | 17 | - [5.center with flexbox and grid](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/center-flexbox-grid) 18 | 19 | - [4.triangles](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/triangles) 20 | 21 | - [3.Underline-animation](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/underline-animation) 22 | 23 | - [2.Toggle-switch](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/toggle-switch) 24 | 25 | - [1.Height-transition](https://github.com/Ninos-labs/Frontips/tree/master/10-css-tips/height-transitions) 26 | 27 | ## Collections 28 | 29 | - [SVG Animation](https://github.com/Ninos-labs/Frontips/tree/master/svg-animation) 30 | 31 | - [countdown-to-new-year](https://github.com/Ninos-labs/Frontips/tree/master/countdown-to-new-year) 32 | 33 | - [Responsive Layout](https://github.com/Ninos-labs/Frontips/tree/master/Responsive-layout) 34 | 35 | - [Star wars intro animation](https://github.com/Ninos-labs/Frontips/tree/master/starwars-intro-animation) 36 | 37 | - [:Where() & :is()](https://github.com/Ninos-labs/Frontips/tree/master/where-is-pseudo-classes) 38 | 39 | - [Z-index](https://github.com/Ninos-labs/Frontips/tree/master/z-index) 40 | 41 | - [Random Color](https://github.com/Ninos-labs/Frontips/tree/master/random-color) 42 | 43 | - [Gradient text](https://github.com/Ninos-labs/Frontips/tree/master/gradient-text) 44 | 45 | - [Datalist](https://github.com/Ninos-labs/Frontips/tree/master/data-list) 46 | 47 | - [Perspective text](https://github.com/Ninos-labs/Frontips/tree/master/perspective-text) 48 | 49 | - [Fluid typography](https://github.com/Ninos-labs/Frontips/tree/master/fluid-typography) 50 | 51 | - [Mix blend mode](https://github.com/Ninos-labs/Frontips/tree/master/mix-blend-mode-II) 52 | 53 | - [Blend-mode](https://github.com/Ninos-labs/Frontips/tree/master/blend-modes) 54 | 55 | - [Multiple drop-shadow](https://github.com/Ninos-labs/Frontips/tree/master/Multiple-drop-shadows) 56 | 57 | - [clip path](https://github.com/Ninos-labs/Frontips/tree/master/tag-sub-sup-html) 58 | 59 | - [Columns property](https://github.com/Ninos-labs/Frontips/tree/master/columns-property) 60 | 61 | - [HTML tags sub and sup](https://github.com/Ninos-labs/Frontips/tree/master/tag-sub-sup-html) 62 | 63 | - [Shape-outside](https://github.com/Ninos-labs/Frontips/tree/master/shape-outside) 64 | 65 | - [Variable Fonts](https://github.com/Ninos-labs/Frontips/tree/master/variable-fonts) 66 | 67 | ## Youtube channel 68 | 69 | - [NinosLabs](https://www.youtube.com/channel/UCrSKu9DdnzaGbjS_GSuMnxw/featured) 70 | -------------------------------------------------------------------------------- /Responsive-layout/README.md: -------------------------------------------------------------------------------- 1 | # responsive layout 2 | 3 | Una de las características de CSS Grid más poderosas es que tenemos la opción de repetir para rellenar columnas en una Grid y luego colocar elementos automáticamente en ellas. 4 | Para ello utilizamos la función `repeat()` que permite repetir columnas tantas veces como sea necesario, con dos valores: `auto fill` y la funcion `minmax()`. 5 | 6 | # 7 | 8 | ![](https://media.giphy.com/media/SqT5gWmUkHxaZnVGQd/giphy.gif) 9 | 10 | # 11 | 12 | [youtube video](https://youtu.be/hHK44INpM14) 13 | 14 | ## Syntax example 15 | 16 | ``` 17 | display: grid; 18 | grid-template-columns: repeat(auto-fill, minmax(x, x)); 19 | ``` 20 | 21 | ## More info 22 | 23 | - [minmax()]() 24 | - [Autofill](https://gridbyexample.com/examples/example37/) 25 | -------------------------------------------------------------------------------- /Responsive-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive layout 8 | 9 | 10 | 11 | 12 | 13 |

Responsive Grid

14 |

Without media queries

15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 |
30 | 31 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Responsive-layout/script.js: -------------------------------------------------------------------------------- 1 | const grid = document.querySelector('.grid'); 2 | const addCardButton = document.querySelector('.btn-add'); 3 | const removeCardButton = document.querySelector('.btn-remove'); 4 | 5 | const addCard = () => { 6 | const card = document.createElement('div'); 7 | card.classList.add('card'); 8 | grid.appendChild(card); 9 | }; 10 | 11 | const removeCard = () => { 12 | const card = document.querySelector('.card'); 13 | grid.removeChild(card); 14 | }; 15 | 16 | addCardButton.addEventListener('click', addCard); 17 | removeCardButton.addEventListener('click', removeCard); 18 | -------------------------------------------------------------------------------- /Responsive-layout/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --light: #d9e8f0; 3 | --bg: #1e2345; 4 | --bg-light: #dbebfa; 5 | --pink: #9b29b7; 6 | --purple: #3720b4; 7 | --purple-light: #8745f6; 8 | --blue: #71d4f9; 9 | --blue-light: #5ab6f6; 10 | --blue-dark: #4763ef; 11 | --orange-dark: #e86e3c; 12 | --orange: #e7983e; 13 | --green: #92ffd8; 14 | --ocean: #09d3ef; 15 | --font: "Roboto Mono", sans-serif; 16 | } 17 | 18 | html { 19 | font-size: 10px; 20 | } 21 | 22 | body { 23 | background: var(--bg-light); 24 | color: var(--bg); 25 | font-family: var(--font); 26 | margin: 0; 27 | padding: 4rem 2rem; 28 | } 29 | 30 | :is(h1, h2) { 31 | margin: 0; 32 | text-align: center; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2rem; 37 | } 38 | 39 | h2 { 40 | font-size: 2.6rem; 41 | margin-bottom: 8rem; 42 | } 43 | 44 | .grid { 45 | width: 80%; 46 | margin: 0 auto; 47 | } 48 | 49 | .card { 50 | background-color: var(--bg); 51 | box-shadow: 0 0.4rem 1.2rem rgba(8, 20, 39, 0.2); 52 | padding: 8rem 4rem; 53 | border-radius: 2rem; 54 | color: white; 55 | font-size: 2rem; 56 | text-align: center; 57 | } 58 | 59 | .card:nth-child(1), 60 | .card:nth-child(8), 61 | .card:nth-child(14), 62 | .card:nth-child(18) { 63 | background: linear-gradient(to right, var(--orange-dark), var(--orange)); 64 | } 65 | .card:nth-child(2), 66 | .card:nth-child(9), 67 | .card:nth-child(15), 68 | .card:nth-child(20) { 69 | background: linear-gradient(to right, var(--green), var(--ocean)); 70 | } 71 | .card:nth-child(3), 72 | .card:nth-child(10), 73 | .card:nth-child(16), 74 | .card:nth-child(22) { 75 | background: linear-gradient(to right, var(--purple), var(--pink)); 76 | } 77 | 78 | .card:nth-child(5), 79 | .card:nth-child(12), 80 | .card:nth-child(17), 81 | .card:nth-child(23) { 82 | background: linear-gradient(to right, var(--blue-dark), var(--blue)); 83 | } 84 | 85 | .card:nth-child(6), 86 | .card:nth-child(13), 87 | .card:nth-child(20), 88 | .card:nth-child(24) { 89 | background: linear-gradient(to right, var(--blue-light), var(--purple-light)); 90 | } 91 | 92 | .actions { 93 | margin: 6rem 0; 94 | text-align: center; 95 | } 96 | 97 | button { 98 | background: var(--bg); 99 | margin: 1rem; 100 | border: none; 101 | cursor: pointer; 102 | font-size: 1.8rem; 103 | padding: 2rem; 104 | width: 150px; 105 | color: white; 106 | border-radius: 2rem; 107 | text-transform: uppercase; 108 | box-shadow: 0 0.8rem 1.2rem rgba(8, 20, 39, 0.2); 109 | transition: all 0.4s ease-in-out; 110 | } 111 | 112 | .btn:hover { 113 | box-shadow: 0 0.4rem 1rem rgba(8, 20, 39, 0.4); 114 | background: var(--blue-dark); 115 | transform: scale(0.98); 116 | } 117 | 118 | .grid { 119 | display: grid; 120 | grid-gap: 20px; 121 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 122 | } 123 | -------------------------------------------------------------------------------- /blend-modes/README.md: -------------------------------------------------------------------------------- 1 | # CSS-properyty background-blend-mode 2 | 3 | La propiedad CSS background-blend-mode describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí. 4 | 5 | ![](https://media.giphy.com/media/Gs9damTRftwBDylzcx/giphy.gif) 6 | 7 | # 8 | 9 | En esta demo, utilizamos `background-blend-mode: multiply;` Lo que hace es que la imagen de fondo y el color de fondo se multiplican y, por lo general, esto conduce a una imagen más oscura que antes. 10 | 11 | ## Syntax 12 | 13 | ```syntax 14 | background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity; 15 | ``` 16 | 17 | ## mix-blend-mode 18 | 19 | Define cómo se debe combinar el contenido de un elemento con su fondo. Esto significa que cualquier imagen o texto, bordes o encabezados serán influenciados por esta propiedad. 20 | Utiliza los mismos valores que background-blend-mode. 21 | 22 | En este caso utilizamos `mix-blend-mode: screen;` que establece el modo de fusión en pantalla. 23 | 24 | ## Links 25 | 26 | - [Basics of CSS Blend Modes](https://css-tricks.com/basics-css-blend-modes/) 27 | - [CSS-Tricks: background blend mode](https://css-tricks.com/almanac/properties/b/background-blend-mode/) 28 | - [CSS-Tricks: Mix-blend-mode](https://css-tricks.com/almanac/properties/m/mix-blend-mode/) 29 | -------------------------------------------------------------------------------- /blend-modes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML tags 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /blend-modes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | .pinneaple { 6 | position: relative; 7 | height: 100vh; 8 | width: 100vh; 9 | } 10 | 11 | /* background blend-mode */ 12 | [class^='box'] { 13 | flex: 1; 14 | width: 100%; 15 | height: calc(100vh / 3); 16 | position: absolute; 17 | left: 0; 18 | top: 0; 19 | background-position: center; 20 | background-image: url('img/pinneaple.svg'); 21 | background-repeat: no-repeat; 22 | background-size: contain; 23 | background-blend-mode: multiply; 24 | animation: slide 6s linear infinite; 25 | mix-blend-mode: screen; 26 | } 27 | 28 | .box--r { 29 | transform: translateY(0%); 30 | background-color: rgb(255, 0, 0); 31 | animation-direction: alternate; 32 | } 33 | 34 | .box--g { 35 | transform: translateY(100%); 36 | background-color: rgb(0, 255, 0); 37 | animation-name: none; 38 | } 39 | 40 | .box--b { 41 | transform: translateY(200%); 42 | background-color: rgb(0, 0, 255); 43 | animation-direction: alternate-reverse; 44 | } 45 | 46 | @keyframes slide { 47 | 0%, 48 | 5% { 49 | transform: translateY(0%); 50 | } 51 | 40%, 52 | 60% { 53 | transform: translateY(100%); 54 | } 55 | 95%, 56 | 100% { 57 | transform: translateY(200%); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /clip-path /README.md: -------------------------------------------------------------------------------- 1 | # CSS-properyty clip-path 2 | 3 | con clip-path podemos usar imágenes o elementos para crear recortes básicos (circle, ellipse, polygon) u otras formas, el cual deja ver parte del elemento con la forma que hiciste el recorte, de esta manera puedes hacer efectos divertidos muy fácilmente. 4 | 5 | ![](https://media.giphy.com/media/eZTKD1IhPcDXXfMrsd/giphy.gif) 6 | 7 | # 8 | 9 | En esta demo, podemos ver que al utilizar `clip-path: circle;` al hacer hover se muestra la forma del circulo al tamaño que queremos, en este caso pasa de un 50% a un 30%. 10 | Lo mismo con `clip-path: polygon;` realizamos la forma de un triangulo y podemos crear otras formas jugando con sus valores. 11 | 12 | Ryan Scherf realizo un tutorial en [CSS-Tricks](https://css-tricks.com/sketchy-avatars-css-clip-path/) sobre el uso de `clip-path: polygon;` 13 | 14 | ## Syntax 15 | 16 | ```syntax 17 | clip-path: inset(100px 50px); 18 | clip-path: circle(50px at 0 100px); 19 | clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 20 | clip-path: path('') 21 | ``` 22 | 23 | ## Links 24 | 25 | - [CSS-Tricks - tutorial](https://css-tricks.com/sketchy-avatars-css-clip-path/) 26 | - [clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) 27 | - [Medium: clip-path](https://medium.com/@acesmndr/clip-path-an-awesome-css-property-you-should-be-using-eb24316d779c) 28 | -------------------------------------------------------------------------------- /clip-path /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Clip-path 8 | 9 | 10 | 11 | 12 |

Clip-path property

13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /clip-path /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | --pink: #d60087; 3 | text-align: center; 4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 5 | } 6 | 7 | .main { 8 | margin: 40px; 9 | } 10 | 11 | h1 { 12 | margin: 40px 0 90px; 13 | font-size: 40px; 14 | color: var(--pink); 15 | } 16 | 17 | .box { 18 | display: inline-block; 19 | position: relative; 20 | margin: 5px; 21 | overflow: hidden; 22 | border-radius: 10px; 23 | } 24 | 25 | .box img { 26 | width: 100%; 27 | vertical-align: top; 28 | transition: all 0.4s ease-out; 29 | } 30 | /* 31 | 32 | 33 | */ 34 | 35 | .box img { 36 | /* circle */ 37 | /* clip-path: circle(30% at 50% 50%); */ 38 | 39 | /* polygon */ 40 | /* clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%); */ 41 | 42 | /* polygon */ 43 | clip-path: polygon(31% 4%, 12% 26%, 30% 50%, 14% 73%, 30% 96%, 50% 70%, 70% 96%, 85% 70%, 70% 50%, 86% 26%, 71% 4%, 50% 30%); 44 | } 45 | 46 | .box:hover img { 47 | transform: scale(1.03); 48 | 49 | /* circle */ 50 | /* clip-path: circle(90% at 50% 50%); */ 51 | 52 | /* polygon */ 53 | /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); */ 54 | 55 | clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0); 56 | } 57 | -------------------------------------------------------------------------------- /columns-property/README.md: -------------------------------------------------------------------------------- 1 | # Columns property 2 | 3 | La propiedad columns de CSS te permite fácilmente definir múltiples columnas de texto. 4 | 5 | ![](https://media.giphy.com/media/VLsAa8aTXUroJwzLEI/giphy.gif) 6 | 7 | Ten en cuenta que el navegador establece un espacio de 1em entre cada columna, pero puedes ajustar ese espacio con column-gap. 8 | 9 | ```syntax 10 | columns: auto|column-width column-count|initial|inherit; 11 | ``` 12 | 13 | ## Links 14 | 15 | - [columns](https://css-tricks.com/almanac/properties/c/columns/) 16 | -------------------------------------------------------------------------------- /columns-property/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Columns 8 | 9 | 10 | 11 |
12 |

The Columns property

13 |
14 |

Two columns

15 | 16 |

17 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim 18 | veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 19 | esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 20 | duis dolore te feugait nulla facilisi. 21 |

22 |

Three columns

23 |

24 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim 25 | veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 26 | esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 27 | duis dolore te feugait nulla facilisi. 28 |

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /columns-property/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | --light: #d9e8f0; 3 | --bg: #1e2345; 4 | --pink: #d60087; 5 | font-size: 10px; 6 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 7 | box-sizing: border-box; 8 | } 9 | 10 | *, 11 | *:before, 12 | *:after { 13 | box-sizing: inherit; 14 | } 15 | 16 | body { 17 | line-height: 1.5; 18 | margin: 0; 19 | } 20 | 21 | /** 22 | ***** 23 | ******* 24 | Paragraph style 25 | ******* 26 | ***** 27 | **** 28 | +*/ 29 | .paragraph-one { 30 | columns: 2; 31 | column-gap: 80px; 32 | } 33 | 34 | .paragraph-two { 35 | columns: 5; 36 | } 37 | 38 | /** 39 | ***** 40 | ******* 41 | ********* 42 | ********** 43 | ********** 44 | ********* 45 | ******** 46 | ******* 47 | ***** 48 | **** 49 | +*/ 50 | 51 | .main { 52 | padding: 1rem; 53 | } 54 | 55 | .paragraphs { 56 | padding: 1rem; 57 | } 58 | 59 | p { 60 | margin-bottom: 1rem; 61 | color: var(--light); 62 | font-size: 1.8rem; 63 | background: var(--bg); 64 | padding: 3rem; 65 | } 66 | 67 | h1, 68 | h2 { 69 | text-align: center; 70 | } 71 | h2 { 72 | margin: 1rem 0 0; 73 | font-size: 2.5rem; 74 | color: var(--pink); 75 | } 76 | 77 | h1 { 78 | font-size: 2.8rem; 79 | margin: 0; 80 | } 81 | -------------------------------------------------------------------------------- /countdown-to-new-year/README.md: -------------------------------------------------------------------------------- 1 | # Countdown to new year 2 | 3 | Cuenta regresiva para nuevo año con vanilla javaScript 4 | 5 | ![Youtube](https://youtu.be/D843_acYR04) 6 | 7 | # 8 | 9 | ## Más información 10 | 11 | - [Math.floor](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor/) 12 | - [Date - javaScript](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Date) 13 | -------------------------------------------------------------------------------- /countdown-to-new-year/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 🎄 Countdown to new year 8 | 9 | 10 | 11 | 15 | 16 | 17 |

Countdown to new year 🎄

18 |
19 |
20 |

00

21 |

days

22 |
23 |
24 |

00

25 |

hours

26 |
27 |
28 |

00

29 |

minutes

30 |
31 |
32 |

00

33 |

seconds

34 |
35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /countdown-to-new-year/script.js: -------------------------------------------------------------------------------- 1 | const daysNode = document.querySelector('.days'); 2 | const hoursNode = document.querySelector('.hours'); 3 | const minutesNode = document.querySelector('.minutes'); 4 | const secondsNode = document.querySelector('.seconds'); 5 | 6 | const nexYear = new Date().getFullYear() + 1; 7 | const newYear = new Date(`January 01 ${nexYear}`); 8 | 9 | const timeCountDown = () => { 10 | const currentDate = new Date(); 11 | const newYearDate = new Date(newYear); 12 | const totalSeconds = (newYearDate - currentDate) / 1000; 13 | 14 | const days = Math.floor(totalSeconds / 3600 / 24); 15 | const hours = Math.floor(totalSeconds / 3600) % 24; 16 | const minutes = Math.floor(totalSeconds / 60) % 60; 17 | const seconds = Math.floor(totalSeconds) % 60; 18 | 19 | daysNode.innerHTML = formatTime(days); 20 | hoursNode.innerHTML = formatTime(hours); 21 | minutesNode.innerHTML = formatTime(minutes); 22 | secondsNode.innerHTML = formatTime(seconds); 23 | }; 24 | 25 | const formatTime = (time) => (time > 10 ? time : `0${time}`); 26 | 27 | timeCountDown(); 28 | setInterval(timeCountDown, 1000); 29 | -------------------------------------------------------------------------------- /countdown-to-new-year/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #110921; 3 | --purple: #3720b4; 4 | --green: #5ff8c2; 5 | --font: 'Mountains of Christmas', cursive; 6 | } 7 | 8 | html { 9 | font-size: 10px; 10 | } 11 | 12 | body { 13 | background-color: var(--bg); 14 | font-family: var(--font); 15 | padding: 10rem 0; 16 | text-align: center; 17 | color: white; 18 | } 19 | 20 | h1 { 21 | font-size: 3vw; 22 | } 23 | 24 | h2, 25 | p { 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | h2 { 31 | font-size: 8rem; 32 | line-height: 8rem; 33 | } 34 | 35 | p { 36 | font-size: 2.8rem; 37 | } 38 | 39 | .countdown { 40 | display: flex; 41 | gap: 40px; 42 | justify-content: center; 43 | } 44 | -------------------------------------------------------------------------------- /data-list/README.md: -------------------------------------------------------------------------------- 1 | # Data List 2 | 3 | La etiqueta te permite configurar sugerencias automáticas para tus con diferentes