Tips CSS

⚡️⭐️🌟Una colección de tips para ayudarte a mejorar sus habilidades de CSS.🌟⭐️⚡️

Tips

Align Text
Background Image con Overlay
Border Gradient
Border vs Outline
Box Shadow (Ej: Bandera 🇲🇽)
Box Shadow to Image
Button Style
Center DIV with Flex
Center DIV with Position
Dinamic Checkbox
Change Color Cursor in textarea
Divide Paragraph in 3 columns
Cursor del maus Personalizado
Valores de la Propiedad Cursor
Destacar primera Letra
Enumerar Headings
Cambiar el Color de una Imagen
Forma Circular a una Imagen
Cambiar la Imagen con un Hover
Mostrar un Atributo como Valor
Cambiar los iconos de una lista "ul"
Como rotar una imagen
Estilizar un Input "email"
Diferencia entre last-of-type y last-child
Linear Gradient "Degradado"
Background with Opacity in Image
Flex Order
Paralax
Vertical Word
Overflow Scroll
Customizar la seleccion de texto
Separador de una Lista
Text Decoration
Alinear Texto y Imagen
Font Style
Text Transform
Toggle
ToolTip
Slide Effect
Triangulo con CSS
Agregar tres puntos al final de un texto
All Unset
Viñetas Triangulares
Word Break
Repeating Linear Gradient
Subíndice y Superíndice
Letra Capital
Neon Effect
Text Gradient
Image Blur
Custon ScrollBar
Animation Emoji
Change Input Color
Btn Hover 01
Image Mirror
Spinner
Text Area Resize
Loader Animation 01
Hover Opacity
Hover Btn 02
Border Hover Animation
Heart Animation
Card Slice Effect
Background Gradient Animated
Loader 3 Dots
Expand Tag
Customize Seacrh Input
Background Image Text
Hover Image Scale
Input Shake Validator
Hover Btn 03 Gradient
Clock Loader
Stroke Title
Display Attributes of tag
Circular Image with Text
Autocomplete Input
Hover Zoom Images
Hover Image Profile
Custom Input Radio
Add Styles to HTML
Ellipses Multiline
Image Preview Js
Marker li Custom Icon
Responsive Columns
Modal Only with CSS HTML
Checkbox Custom
Show and Hide Password
Shorthands Examples
Glitch Effect
Typing Effect
Counter JS
Card Clickable
Cursor Follower
Customize Link by Extension
Show and Hide Password Eye
Border Animation
Christmas Tree SVG
Copy Clipboard
Text Bg Gradient Animated
Text Hover
Btn Hover Ripple
Scroll Progress Bar

Align Text

La propiedad text-align nos ayuda a alinear horizontalmente, sus propiedades mas usadas son: center, justify, left, right, end, start.

p {
	text-align: center;
	text-align: justify;
	text-align: left;
	text-align: right;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Background Image con Overlay

<div class="bg-image">
 <h3>Title</h3>
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima tempora maxime deserunt ea corrupti sequi dignissimos voluptate asperiores</p>
</div>

.bg-image {
	width: 400px;
	height: 270px;
	background-image: linear-gradient(#ffffff79, #ffffff79),url(./rick-morty.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0  10%;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Border Gradient

<div class="box"></div>

.box {
	width: 300px;
	height: 100px;
	border: 10px  solid;
	border-image-slice: 1;
	border-image-source: linear-gradient(to right, blueviolet, pink);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Border vs Outline

<div class="box"></div>

.box {
	width: 200px;
	height: 100px;
	background-color: aquamarine;
	/* Border Properties*/
	border: 10px  dashed  blueviolet;
	border-top: 10px  dotted  violet;
	border-bottom: 20px  double  blue;
	/* Outline Properties*/
	outline: 10px  dotted  gold;
	outline-offset: 10px;
	outline-style: outset;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Box Shadow (Ej: Bandera 🇲🇽)

<div  class="box"></div>

.box {
	width: 50px;
	height: 100px;
	background-color: green;
	box-shadow: 50px  0px  white, 100px  0px  red;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Box Shadow to Image

<img  src="./images/rick-sanchez.png">

/*Values to: drop-shadow(x y blur color) */
img {
	filter: drop-shadow(10px  10px  30px  gold);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Button Style

<a href="#">Enviar Email</a>

a {
	background-color: blueviolet;
	color: #fff;
	text-decoration: none;
	padding: 4px  12px;
	border: solid  2px  blueviolet;
	border-radius: 8px;
	transition: 0.3s;
}
a:hover {
	background-color: #fff;
	color: blueviolet;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Center DIV with Flex

<section>
	<div class="box">Content</div>
</section>

section {
	display: grid;
	place-content: center;
	/* display: flex;
	justify-content: center; */
}
.box {
	border: solid;
	width: 200px;
	/* margin: 0 auto; */
	display: flex;
	justify-content: center;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Center DIV with Position

<section>
	<div  class="box">content</div>
</section>

section {
	border: 1px  solid  black;
	width: 350px; 
	height: 200px;
	position: relative;
}
/*  Center Option 1 */
.box {
	border: 2px  solid  blueviolet;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*  Center Option 2 */
.box {
	border: 2px  solid  blueviolet;
	width: 100px;
	height: 30px;
	position: absolute;
	inset: 0;
	margin: auto;
}
/*Center Horizontally*/
.box {
	border: 2px  solid  blueviolet;
	width: 100px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0  auto;
}
/*Center Vertically*/
.box {
	border: 2px  solid  blueviolet;
	width: 100px;
	height: 30px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto  0;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Dinamic Checkbox

<body>
	<input class="check"  type="checkbox" >
	<span></span>
	<!-- 😀 😔 -->
</body>

span::after {
	content: "😔";
}
.check:checked ~ span:after {
	content: "😀";
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Change Color Cursor in textarea

<textarea>  </textarea>

textarea {
	padding: 5px  14px;
	font-size: 21px;
	caret-color: orangered;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Divide Paragraph in 3 columns

<p>
	It was the best of times, it was the worst
	of times, it was the age of wisdom, it was
	the age of foolishness, it was the epoch of belief, it was the 
</p>

p {
	columns: 3;
	column-rule-style: solid;
	column-rule-color: blueviolet;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Cursor del maus Personalizado

<button>Test Cursor</button>

button {
	width: 150px;
	cursor: var(--pizza), auto;
	cursor: var(--corazon), auto;
}
html {
	cursor: var(--mano), auto;
	--pizza: url("./images/pizza.png");
	--mano: url("./images/hand.png");
	--corazon: url("./images/heard.png");
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Valores de la Propiedad Cursor

<body>
	<div  class="cr-waiting">Waiting</div>
	<div  class="cr-help">Get help</div>
	<div  class="cr-crosshair">Crosshair</div>
	<div  class="cr-grab">Grab</div>
</body>

div {
	border: solid 2px  #cecdcd;
	padding: 8px 3px;
	color: #5a5858;
}
.cr-waiting:hover { cursor: wait; }
.cr-help:hover { cursor: help; }
.cr-crosshair:hover { cursor: crosshair; }
.cr-grab:hover { cursor: grab; }

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Destacar primera Letra

<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit
	Asperiores laborum amet cumque dolore facere praesentium
</p>

p::first-letter {
	font-size: 40px;
	color: blue;
	text-shadow: 5px  5px  5px  black;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Enumerar Headings

<div class="titulos">
	<h1>Título uno</h1>
	<h1>Título dos</h1>
	<h1>Título tres</h1>
	<h1>Título cuatro</h1>
</div>

.titulos {
	counter-reset: heading;
}
h1:before {
	content: counter(heading)". ";
	counter-increment: heading;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Cambiar el Color de una Imagen

<div class="image">
	<img src="./images/jungle.jpg"  alt="jngle image"  width="400"  height="300">
</div>

.image img {
	filter: grayscale(100%);
	filter: brightness();
	filter: contrast();
	filter: saturate()
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Forma Circular a una Imagen

<img  src="./images/dunas.jpg"  alt="dunas">

img {
	width: 200px;
	height: 200px;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 50%;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Cambiar la Imagen con un Hover

<div class="contenedor">
	<img src="./images/dunas.jpg" />
	<img class="over" src="./images/sea.jpg" />
</div>

.contenedor {
	position: relative;
	width: 250px;
	height: 160px;
}
.contenedor  img {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: 1.5s;
}
.contenedor  img.over:hover {
	opacity: 0;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Mostrar un Atributo como Valor

<section>
	<a href="https://google.com/">Google</a>
	</br>
	<a href="https://google.com/"></a>
</section>

a:empty::before {
	content: attr(href);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Cambiar los iconos de una lista "ul"

<ul>
	<li>Example list 1</li>
	<li>Example list 2</li>
	<li>Example list 3</li>
	<li>Example list 4</li>
	<li>Example list 4</li>
	<li>Example list 4</li>
</ul>

ul { list-style: none; }
li { position: relative; }
li:before {
	content: "";
	width: 20px;
	height: 20px;
	background-image: url(./iconStart.png);
	background-size: 100%;
	display: inline-block;
	position: absolute;
	left: -30px;
	top: 3px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Como rotar una imagen

<body>
	<img  src="./images/rick-sanchez.png">
	<img  src="./images/arrow-right.png">
</body>

img {
	transform: rotateY(0deg);
	transform: rotateX(0deg);
	transform: rotate(360deg);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Estilizar un Input "email"

<div class="box-email">
	<input  type="email">
</div>

input {
	font-size: inherit;
	padding: 10px;
	border-radius: 10px;
	border: 2px  solid  blueviolet;
	outline: none;
}
.box-email { position: relative; }
.box-email:before {
	content: "email";
	position: absolute;
	top: -10px;
	left: 20px;
	background-color: #fff;
	padding: 0  4px;
	color: blueviolet;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Diferencia entre `last-of-type` y `last-child`

<section>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, asperiores.</p>
	<p>Optio nulla perferendis officiis quo deserunt eum sint quis aliquam dignissimos</p>
	<p>quas aperiam vero eius dolorem corporis asperiores?</p>
	<!-- <img src="" alt=""> -->
</section>

p:last-of-type {
	color: red;
}
p:first-of-type {
	font-weight: 800;
}
p:last-child {
	color: violet;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Linear Gradient "Degradado"

<div class="box"></div>

.box {
	border: 1px  solid  gray;
	width: 300px;
	height: 200px;
	/*lg(direccion, color %, color %)*/
	background:
	linear-gradient(violet  10%, aqua  50%);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Background with Opacity in Image

<div>
	<h4>Title Card</h4>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam.</p>
</div>

div {
	width: 250px;
	height: 200px;
	position: relative;
	padding: 10px;
}
div::after {
	content: "";
	background-image: url(./images/dunas.jpg);
	background-size: cover;
	position: absolute;
	inset: 0;
	opacity: 0.5;
	z-index: -1;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Flex Order

<div  class="flex-container">
	<div  class="item c-1">1</div>
	<div  class="item c-2">2</div>
	<div  class="item c-3">3</div>
</div>

.flex-container {
	display: flex;
}
.item {
	width: 70px; 
	height: 70px;
	background-color: gold;
	border: 1px  solid  gray;
}
.c-1 { order: 6; }
.c-2 { order: 4; }
.c-3 { order: 9; }

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Paralax

<section>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis numquam nisi corporis tenetur consequuntur voluptatibus? Neque quaerat omnis est! Voluptas quae eligendi iure, aliquid consequuntur amet corrupti odit perferendis explicabo.</p>
	<div class="image"></div>
	<p>numquam nisi corporis tenetur consequuntur voluptatibus? Neque quaerat omnis est! Voluptas quae eligendi iure, aliquid consequuntur amet corrupti odit perferendis explicabo.</p>
</section>

section {
	border: 1px  solid  gray;
	width: 400px; 
	height: 300px;
	overflow: auto;
}
.image {
	height: 150px;
	background-image: url(./sabana.jpg);
	background-attachment: fixed;
	background-size: contain;
	background-position: center ;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Vertical Word

<body>
	<!-- <h2>Vertical Word.</h2> -->
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, asperiores. Optio nulla perferendis officiis quo deserunt eum sint saepe praesentium quis aliquam dignissimos, quas aperiam vero eius dolorem corporis asperiores?</p>
</body>

p, h2 {
	writing-mode: vertical-lr;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Overflow Scroll

<div>
	Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto
	de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y estándar de las industrias desde el año.
</div>

div {
	width: 300px;
	height: 180px;
	border: 1px  solid  gray;
	overflow: auto;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Customizar la seleccion de texto

<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
	Pariatur, doloribus incidunt. Modi asperiores corrupti
	accusantium beatae corporis iure rem, animi ea velit?
</p>

p::selection {
	color: blueviolet;
	background-color: aquamarine;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Separador de una Lista

<ul>
	<li>ListOne</li>
	<li>ListTwo</li>
	<li>ListThree</li>
</ul>

ul {
	display: flex;
}
ul > li {
	list-style: none;
}
ul > li:not(:last-child)::after{
	content: "-";
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Text Decoration

<p>
	Lorem ipsum dolor, modi consequatur voluptates possimus.
	<a  href="#">consectetur adipisicing</a>
	aperiam atque beatae odit, cupiditate voluptatibus rem
	<a  href="#">aperiam atque beatae odit, cupiditate voluptatibus rem </a>
</p>

a {
	text-decoration-color: aqua;
	text-decoration-thickness: 4px;
	text-decoration-style: solid;
}
a:hover {
	text-decoration-style: dotted;
	text-decoration-color: orange;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Alinear Texto y Imagen

<body>
	<p>Simply dummy text of the printing and
	<img  src="./images/dunas.jpg"  alt="dunas">
	typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.text ever since the 1500s, when an unknown It has survived not only five centuries, but also the leap into electronic
	</p>
</body>

img {
	float: right;
	margin-left: 15px;
}
p {
	text-align: justify;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Font Style

<p>This is a example paragraph</p>

p {
	font-style: normal;
	font-style: italic;
	font-style: oblique;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Text Transform

<h2>Texto De ejemplo</h2>

h2 {
	text-transform: uppercase;
	text-transform: lowercase;
	text-transform: capitalize;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Toggle

<div class="toggle-box ">
	<div  class="circle"></div>
</div>

.toggle-box {
	width: 70px; 
	height: 40px;
	background-color: blueviolet;
	border-radius: 25px;
	display: flex;
	align-items: center;
	padding: 0  2px;
	cursor: pointer;
}
.circle {
	background-color: #fff;
	width: 35px; height: 35px;
	border-radius: 50%;
}
.toggle-box.dark {
	justify-content: right;
}

let  toggle = document.querySelector(".toggle-box");
toggle.addEventListener('click', () => {
	toggle.classList.toggle("dark")
})

^{⬆️ back to table of contents} ^{🎬 Video Explicación 1} ^{🎬 Video Explicación 2}

ToolTip

<p>
	Lorem<span tooltip="Tooltip Content">ipsum</span>
	dolor sit, eius dolorem corporis asperiores?
</p>

span {
	border-bottom: solid  2px  #000;
	position: relative;
}
span::after {
	content: attr(tooltip);
	position: absolute;
	font-size: 15px;
	top: -35px;
	left: 0;
	background-color: aquamarine;
	border-radius: 5px;
	display: none;
}
p  span:hover::after {
	display: block;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Slide Effect

<div  class="box">
	<div  class="child">this is a title</div>
</div>

.box {
	height: 150px; width: 200px;
	border: 2px  solid  gray;
	position: relative;
	overflow: hidden;
}
.box:hover .child {
	transform: translateX(-200px);
}
.child {
	width: 200px; height: 50px;
	background-color: aquamarine;
	position: absolute;
	right: -200px;
	transition: 1s;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Triangulo con CSS

<div class="triangle"></div>

.triangle {
	width: 0px;
	height: 0px;
	/* background-color: aqua; */
	border-left: 50px  solid  transparent;
	border-right: 50px  solid  transparent;
	border-bottom: 100px  solid  blueviolet;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Agregar tres puntos al final de un texto

<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
	Pariatur, doloribus incidunt. Modi asperiores corrupti
	accusantium beatae corporis iure rem, animi ea velit?
</p>

p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 200px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

All Unset

<a href="#">Example</a>

a {
	text-decoration: none;
	color: #000;
	background-color: cyan;
	padding: 6px  23px;
	border-radius: 9px;
	/* all: unset; */
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Viñetas Triangulares

<ul>
	<li>Título uno</li>
	<li>Título dos</li>
	<li>Título tres</li>
	<li>Título cuatro</li>
</ul>

ul {
	list-style: none;
}
ul  li::before {
	content: "";
	border-color: transparent  #000;
	border-style: solid;
	border-width: 7px  0  7px  10px;
	display: block;
	width: 0;
	position: relative;
	left: -20px;
	top: 18px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Word Break

<h1>WORDBREAK</h1>

h1 {
	word-break: break-all;
	width: 40px;
	line-height: 35px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Repeating Linear Gradient

<div class="box-bg"></div>

.box-bg {
  	border: 1px solid gray;
  	width: 400px; height: 200px;
  	background: repeating-linear-gradient(
      	45deg,
      	tomato 0px,
      	tomato 20px,
      	white 20px,
     	 white 40px
	);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Subíndice y Superíndice

<h2>CO<sub>2</sub></h2>
<h2>E = mc<sup>2</sup></h2>

sub {
  color: cyan;
}
sup { 
  color: red;
  font-size: 18px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Letra Capital

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.  Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. 
</p>

p::first-letter {
  font-size: 80px;
  float: left;
  line-height: 60px;
  margin-right: 16px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Neon Effect

<div class="neon"></div>

.neon {
  width: 350px;
  height: 15px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px cyan,
              0 0 25px cyan,
              0 0 50px cyan,
              0 0 100px cyan;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Text Gradient

<h2>Gradient Text</h2>

h2 {
  width: fit-content;
  background: linear-gradient(to left,blueviolet,cyan);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Image Blur

<div class="bg-box">
  <div class="glass">
    <p>Merry Christmas</p>
  </div>
</div>

.bg-box {
  width: 400px; height: 250px;
  background-image: url(./example.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
}
.glass {
  background-color: #ffffff44;
  backdrop-filter: blur(5px);
  padding: 0 20px;
  border-radius: 9px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Custon ScrollBar

<div>
  Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. 
  adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. 
  adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. 
</div>

div {
  width: 400px; height: 200px;
  overflow: auto;
}
::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-track {
  background: gold;
}
::-webkit-scrollbar-thumb {
  background: blueviolet;
  border-radius: 15px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Animation Emoji

<h1><span>✋</span> Hello!</h1>

span{
  transform: rotate(-40deg);
  display: inline-block;
  animation: 1s infinite alternate movehand;
}
@keyframes movehand {
  0% {
    transform:rotate(-40deg) translate(10px);
  }
  50% {
    transform:rotate(-40deg) translate(0px);
  }
  100% {
    transform:rotate(-40deg) translate(10px);
  }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Change Input Color

<form>
  <label>Checkbox:</label>
  <input type="checkbox"><br>
  <label>Radio1:</label>
  <input type="radio" name="test">
  <label>Radio2:</label>
  <input type="radio" name="test"><br>
  <label>Range:</label>
  <input type="range"><br>
</form>

input {
  accent-color: gold;
}
input[type=radio] {
  accent-color: blueviolet;
}
input[type=range] {
  accent-color: cyan;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Btn Hover 01

<a href="#">Hover 01</a>

a {
  border: 3px solid gold;
  text-decoration: none;
  padding: 20px;
  color: #000;
  background: linear-gradient(
    45deg, gold 50%, transparent 50%
  );
  background-position: 100%;
  background-size: 250%;
  transition: 0.5s background
}
a:hover {
  background-position: 0;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Image Mirror

<img src="./example.png" alt="rick">
<img src="./example.png" alt="rick">

img:last-of-type {
  /* -webkit-box-reflect: right; Deprecate...*/
  /* transform: scaleX(-1); */
  transform: rotateY(180deg);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Spinner

<div class="spinner"></div>

.spinner {
  width: 80px; height: 80px;
  border: 10px solid blueviolet;
  border-top: 10px solid plum;
  border-radius: 50%;
  animation: 1s linear infinite spiner;
}
@keyframes spiner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Text Area Resize

<textarea cols="30" rows="10"></textarea>

textarea {
  border: 2px solid #000;
  resize: both;
  resize: horizontal;
  resize: vertical;
  resize: none;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Loader Animation 01

<div class="loader"></div>

.loader {
  width: 60px; height: 60px;
  background-color: blueviolet;
  border-radius: 50%;
  animation: 1s scaler infinite linear;
}
@keyframes scaler {
  to {
    transform: scale(0);
    opacity: 1;
  }
  from {
    transform: scale(1);
    opacity: 0;
  }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Hover Opacity

<section>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</section>

section {
  display: flex;
  gap: 5px;
}
.card {
  width: 90px; height: 90px;
  background-color: aquamarine;
  border-radius: 5px;
  transition: 0.3s;
}
section:hover > :not(:hover) {
  opacity: 0.4;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Hover Btn 02

<a href="#">Hover 02</a>

a {
  color: #fff;
  text-decoration: none;
  background-color: cyan;
  padding: 20px;
  border-radius: 10px;
}
a:hover {
  /* x, y, desenfoque, propagacion, color */
  box-shadow: 0 0 10px 0 cyan inset, 0 0 10px 4px cyan;
  background-color: transparent;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Border Hover Animation

<div class="profile"></div>

.profile {
  width: 150px; 
  height: 150px;
  background: url(./profile.jpg);
  background-size: cover;
}
.profile::before {
  content: "";
  width: 90%; 
  height: 90%;
  border: 10px solid cyan;
  display: block;
  transition: 0.5s;
}
.profile:hover:before {
  transform: rotate(45deg);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Heart Animation

<div class="heart">❤️</div>

.heart {
  font-size: 50px;
  width: fit-content;
  animation: 0.5s bigHeart alternate infinite;
}

@keyframes bigHeart {
  to { transform: scale(1); }
  from { transform: scale(1.5); }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Card Slice Effect

<div class="box">Description</div>

.box {
  width: 150px; height: 150px;
  background-color: aquamarine;
  display: grid;
  place-content: center;
  position: relative;
}
.box:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(./user.jpg);
  background-size: cover;
  transition: 0.5s;
}
.box:hover:before {
  transform: translateX(150px);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Background Gradient Animated

<div class="bg-gradient"></div>

.bg-gradient {
  width: 300px; 
  height: 150px;
  background: linear-gradient(90deg, cyan, blueviolet);
  background-size: 400% 400%;
  border-radius: 10px; 
  animation: 2s gradient infinite;
}
@keyframes gradient {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Loader 3 Dots

<div class="dots">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

.dots {
  display: flex; 
  gap: 5px;
}
.dot {
  width: 30px; 
  height: 30px;
  background-color: blueviolet;
  border-radius: 50%;
  animation: 0.3s updown infinite
    alternate ease-in-out;
}
.dot:nth-child(2) {
  animation-delay: 0.1s;
}
@keyframes updown {
  0% { transform: translateY(25px); }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Expand Tag

details y summary

<details>
  <summary>
    Read more:
  </summary>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta obcaecati deleniti quia, saepe nostrum incidunt, dicta 
  </details>

<details>
  <summary>
    Read more:
  </summary>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
</details>

details {
  width: 300px;
  border: 1px solid gray;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Customize Seacrh Input

<div class="search">
  <img src="./lenss.png" alt="icon">
  <input type="search" placeholder="search">
</div>

.search {
  background-color: tomato;
  width: fit-content;
  padding: 4px;
  display: flex;
  border-radius: 25px;
}
img {
  width: 20px;
  background-color: gold;
  padding: 10px;
  border-radius: 50%;
}
.search:hover input {
  width: 140px;
  padding: 0 10px 0 10px;
}
input {
  transition: 0.4s;
  width: 0;
  background-color: transparent;
  border: 0;
  outline: none;
  font-size: 20px;
  padding: 0;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Background Image Text

<h2 class="text">BgImage</h2>

.text {
  font-size: 70px;
  background: url(./textImage.jpg);
  width: fit-content;
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 900;
  text-transform: uppercase;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Hover Image Scale

<div class="card">
  <img src="./controller.png" alt="image">
</div>

.card {
  width: 200px; height: 200px;
  overflow: hidden;
  border-radius: 10px;
}
img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.5s;
}
.card:hover img {
  transform: scale(1.2);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Input Shake Validator

<input type="text" pattern="[a-z]*">

input {
  padding: 10px;
  border-radius: 5px;
  outline: none;
}
input:invalid {
  border: 2px solid tomato;
  animation: 0.2s valid 3;
}
@keyframes valid {
  to { transform: translateX(0); }
  from { transform: translateX(10px); }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Text Wave Animation

<body>
  <span style="--n:1">B</span>
  <span style="--n:2">L</span>
  <span style="--n:3">A</span>
  <span style="--n:4">C</span>
  <span style="--n:5">K</span>
</body>

span {
  animation: 1.5s waves infinite;
  display: inline-block;
  animation-delay: calc(0.1s * var(--n));
  font-size: 40px;
  font-weight: 800;
}
@keyframes waves {
  0%,40%,100% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-30px);
  }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Hover Btn 03 Gradient

<a href="#">HOVER 03</a>

a {
  text-decoration: none;
  background: linear-gradient(
    90deg, aqua, fuchsia
  );
  padding: 15px 35px;
  color: #fff;
  border-radius: 7px;
  display: inline-block;
  transition: 0.4s transform;
}
a:hover {
  background-size: 200%;
  transform: scale(1.1);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Clock Loader

<div class="loader"></div>

.loader {
  width: 70px; 
  height: 70px;
  border: 5px dotted blueviolet;
  border-radius: 50%;
  position: relative;
}
.loader:after {
  content: "";
  width: 3px; 
  height: 30px;
  background: darkblue;
  display: block;
  position: absolute;
  left: 35px; bottom: 35px;
  transform-origin: 0 100%;
  animation: 2s clock infinite;
}
@keyframes clock {
  to { transform: rotate(360deg); }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Stroke Title

<h1>TITLE</h1>

h1 {
  text-shadow: 4px 4px cyan;
    -webkit-text-stroke-color: #fff;
    -webkit-text-stroke-width: 1px;
  color: transparent;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo} ^{🚀 Demo}

Display Attributes of tag

<span data="Black">Code 💻</span>

span:after {
  content: attr(data);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Circular Image with Text

<div class="circle">
  <img src="./aple.png" alt="aple">
</div>
<p>
	Lorem ipsum dolor, sit amet consec tetur adipi sicLorem ipsum dolor, sit amet consec tetur adipi sim ipsu dolor sit amet consectetur adipisim ipsum dolor, sit amet consec tetur adipi sicing elit. Enim omnis veniam facilis autem, ipsa doloribus dolor quasi repre henderit quod in quis atque facere consec tetur iste? Ipsam dolorum dignissimos facere ad! Lorem ipsum dolor, sit amet consec tetur adipisic Lorem ipsum 
</p>

.circle {
  width: 100px;
  height: 100px;
  float: left;
  shape-outside: circle(50%);
}
img {
  width: 90%;
  height: 90%;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Autocomplete Input

<label>Lenguajes:</label>
<input type="text" list="lista">

<datalist id="lista">
  <!-- <option value="JavaScript"></option>
  <option value="Python"></option>
  <option value="Java"></option>
  <option value="C#"></option> -->
</datalist>
  
<script>
  const callApi = async () => {
    const data = await fetch("https://dog.ceo/api/breeds/list");
    const dataJson = await data.json();
    //console.log(dataJson.message);
    let lista = document.querySelector("#lista");
    console.log(lista);
    dataJson.message.forEach(item => {
      let element = document.createElement("option");
      element.value = item;
      //console.log(element);
      lista.appendChild(element);
    });
  }
callApi();
</script>

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Hover Zoom Images

<div class="container">
  <div class="card">
    <img src="./one.jpg" alt="...">
  </div>
  <div class="card">
    <img src="./two2.jpg" alt="...">
  </div>
  <div class="card">
    <img src="./three.jpg" alt="...">
  </div>
  <div class="card">
    <img src="./four.jpg" alt="...">
  </div>
</div>

.container {
  display: flex;
  width: 200px;
}
.card {
  flex: 1;
  overflow: hidden;
  filter: grayscale(1);
  transition: 0.5s;
}
.card img {
  width: 100px;
  height: 100px;
}
.card:hover {
  flex: 2;
  filter: grayscale(0);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Hover Image Profile

<figure>
  <img src="./profile.jpg" alt="profile">
</figure>

figure {
  width: 150px;
  height: 150px;
  border: 7px solid gray;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.5s;
  transform-origin: 0 100%;
  transform: scale(0.70)rotateZ(-10deg);
}
figure:hover { 
  transform: scale(0.70)rotateZ(0deg); 
}
figure:hover img { 
  transform: rotateZ(0deg); 
}
img {
  width: 100%; 
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
  transform: scale(1.2)rotateZ(10deg);
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Custom Input Radio

<form>
  <label>Radio1:</label>
  <input type="radio" name="test">
  <label>Radio2:</label>
  <input type="radio" name="test"><br>
</form>

input[type=radio] {
  appearance: none;
  width: 25px; 
  height: 25px;
  border: 2px solid gold;
  border-radius: 50%;
}
input[type=radio]:checked::before {
  content: "";
  width: 100%; 
  height: 100%;
  background: linear-gradient(45deg,purple, red, gold);
  display: block;
  border-radius: 50%;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Add Styles to HTML

Estilos en con la etiqueta style

<head>
  <style>
    h2 {
      color: blueviolet;
      font-size: 40px;
    }
  </style>
</head>

Estilos en linea

<h2 style="color: green">Titulo Pricipal</h2>

Estilos en un archivo css

<head>
  <link rel="stylesheet" href="./style.css">
</head>

^{⬆️ back to table of contents} ^{🎬 Video Explicación}

Ellipses Multiline

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, iure? Voluptatem necessitatibus praesentium culpa rem odit neque facilis, hic quisquam, incidunt nobis omnis, laborum molestias voluptas eaque vitae eligendi ratione!
</p>

p {
  width: 320px;
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Image Preview Js

<img 
  id="preview" 
  src="./preview.jpg" 
  height="200"
> 
<br>
<input type="file" id="input">

let img = document.querySelector("#preview")
let file = document.querySelector("#input")

file.onchange = (e) => {
  if (file.files[0]) {
    img.src = URL.createObjectURL(
      file.files[0]
    )
  }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Marker li Custom Icon

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>

li {
  list-style: disc;
}
li::marker {
  content: "Paso " counter(list-item)": ";
  color: blueviolet;
}
li::marker {
  /* content: "🤪"; */
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Responsive Columns

<div>
  <h2>The Title</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo esse temporibus accusantium iure sint. Dignissimos illum quaerat eveniet placeat, eum error blanditiis quos est hic tenetur quia aliquam corporis maxime?
  </p>
</div>

div {
  border: 1px solid black;
  padding: 10px;
  border-radius: 8px;
  columns: 200px 2;
}
h2 {
  column-span: all;
  margin: 0;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Modal Only with CSS HTML

<a href="#modal">Open Modal</a>
<div id="modal" class="new-modal">
  <div>
    <h2>Modal Title</h2>
    <p>Modal without javascript only with CSS.</p>
    <a href="#close">Close</a>
  </div>
</div>

.new-modal {
  background: #00000088;
  position: fixed;
  inset: 0;
  display: none;
}
.new-modal:target {
  display: block;
}
.new-modal div {
  background: #fff;
  width: 300px;
  margin: 20px auto;
  padding: 10px;
  border-radius: 5px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Checkbox Custom

<label>
  <input type="checkbox">
  Checkbox
</label>

input[type="checkbox"] {
  appearance: none;
  width: 15px; height: 15px;
  background: tomato;
  border-radius: 3px;
}
input:checked::before {
  content: "✔️";
  font-size: 11px;
  width: 100%; height: 100%;
  /* background: url(./check.svg);
  background-size: 100%; */
  display: block;
}
label {
  display: flex;
  align-items: center;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Show and Hide Password

<label>
  Password:
  <input type="password" id="field">
</label>
<br>
<label>
  Show Password:
  <input type="checkbox" onclick="showPwd()">
</label>

const showPwd = () => {
  let input = document.querySelector("#field")
  if (input.type === "password") {
    input.type = "text"
  } else {
    input.type = "password"
  }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Shorthands Examples

/* top|right|bottom|left */
margin: 10px 5px 15px 0px;
padding: 10px 5px 15px 0px;

/* top.left|top.right|bottom.right|bottom.left */
border-radius: 2px 15px 50px 25px;
/* top.left|top.right-bottom.left|bottom.right */
border-radius: 2px 15px 50px;
/* top.left-bottom.right|bottom.left-top.right */
border-radius: 2px 50px;

/* width|style|color */
border: 1px solid gray;

/* color|image|repeat|position */
background: aqua url("bg.jpg") no-repeat 50% 50%;

/* type|position|image */
list-style: square inside url("icon.png");

/* style|weight|size|line-height|family */
font: normal bold 16px/20px Arial;

/* property|duration|timing-function */
transition: color 2s ease-in;

/* name|duration|timing-function|delay|iteration-count */
animation: move-letter 2s ease 1s infinite;

/* flex-direction|flex-wrap */
flex-flow: column wrap;

/* align-items|justify-items */
place-items: center start;

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Glitch Effect

<p>GLITCH</p>

p:hover {
  animation: 0.3s glitch infinite;
}

@keyframes glitch {
  0% {
    text-shadow: red -4px 0, cyan 4px 0;
  }
  50% {
    text-shadow: red 4px 0, cyan -4px 0;
  }
  100% {
    text-shadow: red -4px 0, cyan 4px 0;
  }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Typing Effect

<h1>TYPING</h1>

h1 {
  width: 1ch;
  overflow: hidden;
  font-family: 'Courier New';
  animation: 4s typing steps(7) infinite alternate;
}
@keyframes typing {
  from { width: 0ch; }
  to { width: 7ch; }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Counter JS

<h2>
  <span class="count">0</span>+
</h2>

let count = document.querySelector(".count");
let counter = 0;
  let interval = setInterval(()=>{
    if (counter < 200) {
      counter++;
      count.innerText = counter;
    } else {
      clearInterval(interval)
    }
    console.log('test');
  }, 10)

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Card Clickable

<div class="card">
  <a href="#"></a>
  <h2>Title</h2>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium, expedita? voluptatibus eaque.</p>
</div>

.card {
  border: 2px solid blueviolet;
  width: 300px;
  padding: 10px;
  position: relative;
}
.card a {
  position: absolute;
  inset: 0;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Cursor Follower

<div class="cursor"></div>

document.addEventListener('mousemove', (e) => {
  const xPos = e.pageX;
  const yPos = e.pageY;
  let m = document.querySelector('.cursor');
  m.style.left = xPos+'px'; 
  m.style.top = yPos+'px'; 
});

.cursor {
  width: 50px; 
  height: 50px;
  background: blueviolet;
  position: absolute;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Customize Link by Extension

<a href="namePdf.pdf">pdf link</a>

a[href$=".pdf" i]::after {
  content: "";
  width: 30px; 
  height: 30px;
  background-image: url(pdf.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Show and Hide Password Eye

<div class="input-row">
  <input type="password" id="field">
  <p class="eye"><img src="eyeclose.svg"></p>
</div>

const eye = document.querySelector('.eye')
eye.addEventListener('click',()=>{
  showPwd()
})

const icon = document.querySelector('.eye img')

const showPwd = () => {
  let input = document.querySelector("#field")
  if (input.type === "password") {
    input.type = "text"
    icon.setAttribute('src', 'eyeopen.svg')
  } else {
    input.type = "password"
    icon.setAttribute('src', 'eyeclose.svg')
  }
}

.input-row {
  display: flex;
  border: 1px solid black;
  width: fit-content;
  padding: 1px 5px;
  border-radius: 10px;
}
.input-row p {
  margin: 0;
  cursor: pointer;
}
.input-row input {
  border: 0;
  outline: none;
}
.input-row img {
  width: 25px;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Border Animation

<div class="box">Content</div>

.box {
  width: 150px; 
  height: 100px;
  background-color: blueviolet;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;
}
.box::before {
  content: '';
  width: 70px; 
  height: 200px;
  background-color: white;
  position: absolute;
  animation: 4s rotate linear infinite;
  z-index: -1;
}
.box::after {
  content: '';
  background-color: gold;
  position: absolute;
  inset: 5px;
  z-index: -1;
}
@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Christmas Tree SVG

<svg width="200" height="300" viewBox="-50 -50 200 300">
  <rect x="40" y="95" width="20" height="30" fill="Brown" />

  <polygon points="50,20 100,100 0,100" fill="DarkGreen"/>
      
  <polygon points="50,0 90,60 10,60" fill="Green"/> 
</svg>

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Copy Clipboard

<input type="text" class="input">
<button onclick="copyToClipboard()">
  Copiar al Portapapeles
</button>

function copyToClipboard(){
  const copyText = document.querySelector('.input'); 
  copyText.select();
  //document.execCommand('copy');
  navigator.clipboard.writeText(copyText.value);
  }

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Text Bg Gradient Animated

<h2>BLACKCODE</h2>

h2 {
  background: linear-gradient(to right, blueviolet, cyan, blueviolet);
  width: fit-content;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: 3s gradient linear infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 75%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 75%;
  }
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Text Hover

<p>Hover</p>

p {
  -webkit-text-stroke: 4px #fff;
  font-size: 130px;
  margin: 0;
  font-weight: 800;
  color: transparent;
  transition: 0.5s;
  text-shadow: 5px 5px 0px #07bccc,
    10px 10px 0px #e601c0,
    15px 15px 0px #e9019a,
    20px 20px 0px #f40468;
}

p:hover {
  text-shadow: none;
}

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Btn Hover Ripple

<a href="#" class="btn">
  <span>Button</span>
</a>

.btn {
  background-color: lightcyan;
  padding: 20px 40px;
  border-radius: 5px;
  text-decoration: none;
  color: black;
  position: absolute;
  overflow: hidden;
}

.btn span {
  position: relative;
  z-index: 1;
}

.btn::before {
  content: "";
  width: 0px;
  height: 0px;
  background-color: deepskyblue;
  position: absolute;
  left: var(--xPos);
  top: var(--yPos);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.btn:hover::before {
  width: 340px;
  height: 340px;
}

const btn = document.querySelector('.btn')

btn.addEventListener('mouseover', (e) => {
  let x = e.pageX - btn.offsetLeft;
  let y = e.pageY - btn.offsetTop;

  btn.style.setProperty('--xPos', x + 'px')
  btn.style.setProperty('--yPos', y + 'px')
})

^{⬆️ back to table of contents}

Scroll Progress Bar

<div id="bar"></div>

#bar {
  width: 0;
  border-bottom: 10px solid blueviolet;
  position: fixed;
  top: 0;
  left: 0;
}

// Simular contenido en la pagina
document.body.appendChild(document.createTextNode("Lorem Ipsum Lorem Ipsum ".repeat(1000)));

// Código necesario para la funcionalidad
let bar = document.querySelector('#bar');
window.addEventListener('scroll', () => {
  let max = document.body.scrollHeight - innerHeight;
  bar.style.width = (pageYOffset / max) * 100 + '%';
})

^{⬆️ back to table of contents}

👉 Si te sirvió Deja Tu: ⭐️

🎬 @blackcode222 👍

Skills-CSS Skills-CSS copied to clipboard

Metadata

Tips CSS

Tips

Align Text

Background Image con Overlay

Border Gradient

Border vs Outline

Box Shadow (Ej: Bandera 🇲🇽)

Box Shadow to Image

Button Style

Center DIV with Flex

Center DIV with Position

Dinamic Checkbox

⬆️ back to table of contents 🎬 Video Explicación 🚀 Demo

Change Color Cursor in textarea

Divide Paragraph in 3 columns

Cursor del maus Personalizado

Valores de la Propiedad Cursor

Destacar primera Letra

Enumerar Headings

Cambiar el Color de una Imagen

Forma Circular a una Imagen

Cambiar la Imagen con un Hover

Mostrar un Atributo como Valor

Cambiar los iconos de una lista "ul"

Como rotar una imagen

Estilizar un Input "email"

Diferencia entre last-of-type y last-child

Linear Gradient "Degradado"

Background with Opacity in Image

Flex Order

Paralax

Vertical Word

Overflow Scroll

Customizar la seleccion de texto

Separador de una Lista

Text Decoration

Alinear Texto y Imagen

Font Style

Text Transform

Toggle

ToolTip

Slide Effect

Triangulo con CSS

Agregar tres puntos al final de un texto

All Unset

Viñetas Triangulares

Word Break

Repeating Linear Gradient

Subíndice y Superíndice

Letra Capital

Neon Effect

Text Gradient

Image Blur

Custon ScrollBar

Animation Emoji

Change Input Color

Btn Hover 01

Image Mirror

Spinner

Text Area Resize

Loader Animation 01

Hover Opacity

Hover Btn 02

Border Hover Animation

Heart Animation

Card Slice Effect

Background Gradient Animated

Loader 3 Dots

Expand Tag

Customize Seacrh Input

Background Image Text

Hover Image Scale

Input Shake Validator

Text Wave Animation

Hover Btn 03 Gradient

Clock Loader

Stroke Title

Display Attributes of tag

Skills-CSS
Skills-CSS copied to clipboard

^{⬆️ back to table of contents} ^{🎬 Video Explicación} ^{🚀 Demo}

Diferencia entre `last-of-type` y `last-child`