Skip to content
/ Skills-CSS Public

🚀 Una colección de tips para ayudarte a mejorar sus habilidades de CSS 🪐

100 stars 5 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

garu2/Skills-CSS

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

151 Commits
01-Translations
01-Translations
 
 
tips
tips
 
 
README.md
README.md
 
 

Repository files navigation

css image

Tips CSS

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

Tips

  1. Align Text
  2. Background Image con Overlay
  3. Border Gradient
  4. Border vs Outline
  5. Box Shadow (Ej: Bandera 🇲🇽)
  6. Box Shadow to Image
  7. Button Style
  8. Center DIV with Flex
  9. Center DIV with Position
  10. Dinamic Checkbox
  11. Change Color Cursor in textarea
  12. Divide Paragraph in 3 columns
  13. Cursor del maus Personalizado
  14. Valores de la Propiedad Cursor
  15. Destacar primera Letra
  16. Enumerar Headings
  17. Cambiar el Color de una Imagen
  18. Forma Circular a una Imagen
  19. Cambiar la Imagen con un Hover
  20. Mostrar un Atributo como Valor
  21. Cambiar los iconos de una lista "ul"
  22. Como rotar una imagen
  23. Estilizar un Input "email"
  24. Diferencia entre last-of-type y last-child
  25. Linear Gradient "Degradado"
  26. Background with Opacity in Image
  27. Flex Order
  28. Paralax
  29. Vertical Word
  30. Overflow Scroll
  31. Customizar la seleccion de texto
  32. Separador de una Lista
  33. Text Decoration
  34. Alinear Texto y Imagen
  35. Font Style
  36. Text Transform
  37. Toggle
  38. ToolTip
  39. Slide Effect
  40. Triangulo con CSS
  41. Agregar tres puntos al final de un texto
  42. All Unset
  43. Viñetas Triangulares
  44. Word Break
  45. Repeating Linear Gradient
  46. Subíndice y Superíndice
  47. Letra Capital
  48. Neon Effect
  49. Text Gradient
  50. Image Blur
  51. Custon ScrollBar
  52. Animation Emoji
  53. Change Input Color
  54. Btn Hover 01
  55. Image Mirror
  56. Spinner
  57. Text Area Resize
  58. Loader Animation 01
  59. Hover Opacity
  60. Hover Btn 02
  61. Border Hover Animation
  62. Heart Animation
  63. Card Slice Effect
  64. Background Gradient Animated
  65. Loader 3 Dots
  66. Expand Tag
  67. Customize Seacrh Input
  68. Background Image Text
  69. Hover Image Scale
  70. Input Shake Validator
  71. Hover Btn 03 Gradient
  72. Clock Loader
  73. Stroke Title
  74. Display Attributes of tag
  75. Circular Image with Text
  76. Autocomplete Input
  77. Hover Zoom Images
  78. Hover Image Profile
  79. Custom Input Radio
  80. Add Styles to HTML
  81. Ellipses Multiline
  82. Image Preview Js
  83. Marker li Custom Icon
  84. Responsive Columns
  85. Modal Only with CSS HTML
  86. Checkbox Custom
  87. Show and Hide Password
  88. Shorthands Examples
  89. Glitch Effect
  90. Typing Effect
  91. Counter JS
  92. Card Clickable
  93. Cursor Follower
  94. Customize Link by Extension
  95. Show and Hide Password Eye
  96. Border Animation
  97. Christmas Tree SVG
  98. Copy Clipboard
  99. Text Bg Gradient Animated
  100. Text Hover
  101. Btn Hover Ripple
  102. Scroll Progress Bar
  103. Download Button
  104. Input File

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

Download Button

<a href="abstract.jpeg" download="NewImage">
  Download
</a>
a {
  border: 1px solid black;
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  color: black;
}

⬆️ back to table of contents

Input File

<input type="file" id="fileInput" accept=".jpg, .png" multiple required>
const file = document.querySelector('#fileInput')
file.addEventListener('change', (e) => {
  const files = e.target.files;
  console.log(files);
})

⬆️ back to table of contents

👉    Si te sirvió Deja Tu: ⭐️
🎬  @blackcode222 👍

About

🚀 Una colección de tips para ayudarte a mejorar sus habilidades de CSS 🪐

Topics

css flex skills css3 tips flexbox-css tips-and-tricks learning-css protips

Resources

Readme
Activity

Stars

100 stars

Watchers

2 watching

Forks

5 forks
Report repository

Languages