Tips CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Word Break

<h1>WORDBREAK</h1>

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

back to table of contents Video Explicación

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

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

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

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

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

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

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

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

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

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

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

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

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

GitHub - garu2/Skills-CSS: 🚀 Una colección de tips para ayudarte a mejorar sus h...

Tips CSS

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

Recommend

About Joyk

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