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 selecciond 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

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}

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}

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}

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}

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}

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}

👉 Si te sirvió Deja Tu: ⭐️

🎬 @blackcode222 👍

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

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

About

Languages

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