Writing Efficient CSS

PHOTO

Sat May 08 2021 13:25:00 GMT+0000 (UTC)

<style>
.heading {
  font-family: sans-serif;
  font-weight: 700;
}
.warning {
  color: yellow;
}
.danger {
  color: red;
}
.info {
  color: blue;
}
</style>

<body>
<h1 class="heading warning">...</h1>
<h2 class="heading danger">...</h2>
<h3 class="heading info">...</h3>
</body>

COPY

You might know how to use Class and Id now but it doesn't mean you should use them excessively. Good practice in writing efficient and manageable HTML CSS is to keep things modular, layering classes, and sharing styles from element to element. Say you want to style some headers. You can define the styles for each of the headers individually like this.

https://www.altcademy.com/classroom/courses/webdesignium/book/combining-and-layering-selectors

Save snippets that work from anywhere online with our extensions

Comments

CSS

@bilgehanevren

visibility css html - display: inline-block extra margin - Stack Overflow css - Float right and position absolute doesn't work together - Stack Overflow hero image specificity how to use classes and ids in syntax Writing Efficient CSS Writing Efficient CSS html - Make body have 100% of the browser height - Stack Overflow css - Does height and width not apply to span? - Stack Overflow Positioning with Floats float clearfix clear both float clearfix clear both Floats Tutorial | HTML html - Stretch image input and then fit to its container's width - Stack Overflow

#css #html

Background Image That Doesn't Scroll on Webpage

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#css #shapes

Make a circle with just CSS

<style>

 .circle:before {
                    content: ' \25CF';
                    font-size: 50px;
                    color: black;
                }
</style>

<span class="circle"></span>

#css

Add a Mask in CSS

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

#css

Media query

/*EX:.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    } */

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;


// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}

#css

Text Rotation in CSS

 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don

#css #layout

Centering Things with CSS Auto Margin

.box-one {
	width: 100px;
	margin: 0 auto;
}

.box-two {
	width: 100px;
	margin-left: auto;
    margin-right: auto;
}

#css #webdev #text

How to "truncate" long strings with an ellipsis (...) for text that overflows its container

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#css #html #z-index

Efecto de transición de background(transition, opacity)

<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas z1" style="--backgroundImg: url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">1ahola</div>
<div class="columnas z2" style="--backgroundImg: url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">2a</div>
<div class="columnas z3" style="--backgroundImg: url(https://img.culturacolectiva.com/featured_image/2018/10/04/1538678265674/deforestacion-del-bosque-amazonico-diecisiete-por-ciento.jpg)" >3a</div>
<div class="columnas z4" style="--backgroundImg: url(https://st.depositphotos.com/1012061/4434/i/600/depositphotos_44342021-stock-photo-sun-rays-inside-coconut-palms.jpg)">4a</div>
</div> <!-- Fin del contenedor -->

// css 

body{
z-index: -10:
} /* para asegurar que nadie este por debajo de body*/
.skt-hero {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    background-image: url(https://haciendofotos.com/wp-content/uploads/las-mejores-fotos-de-paisajes-2020.jpg);
    background-size: cover;
}
.skt-hero:hover{
    z-index:-3;
}
.columnas {
    width: 25%;
    height: 100%;
    border: 1px solid gray;
    background-color: transparent;
    position:absolute;
    opacity: 0.05;
    transition: opacity 2s ease;
}
.columnas:hover {
    height: 100%;
    width:100vw;
    background-image: var(--backgroundImg);
    position: ;
    z-index: -1;
    background-size: cover;
    opacity: 1;
}
.z1{
left:0%;
}
.z1:hover{
left:0%;
}
.z2{
left:25%;
}
.z2:hover{
left:0%;
}
.z3{
left:50%;
}
.z3:hover{
left:0%;
}
.z4{
left:75%;
}
.z4:hover{
left:0%;
}

#javascript #js #bookmarklet #css

Simple Dark Mode Toggle

javascript:(d=>{var css=`:root{background-color:#f1f1f1;filter:invert(1) hue-rotate(180deg)}img:not([src*=".svg"]),picture,video{filter: invert(1) hue-rotate(180deg)}`,style,id="dark-mode",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)

#css

Ribbon | CSS-Tricks

<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>

#css

Dynamic shadow

.dynamic-shadow {

  position: relative;

  width: rem;

  height: 10rem;

  background: linear-gradient(5deg, #d7ff, #00ffb8);
6
  z-index: 1;
7
}
8
.dynamic-shadow::after {

  content: '';
10
  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  top: 0.5rem;

  filter: blur(0.4rem);

  opacity: 0.7;

  z-index: -1;

}

#css

Removing Jetpack CSS

 add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );

#css #changingdefault #lists

Remove numbers from ordered list <ol>

ol li {
	 list-style-type: none;
     }
     
// OR

li {
	list-style-type: none;
}

#css #design #gradient

How to Make a Linear Gradient in CSS

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      blue,
      yellow, 
      green
    );
}

#css

css image cover - Google Search

background-size: cover;

Writing Efficient CSS

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

Browse more snippets >>

Writing Efficient CSS

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

Browse more snippets >>

Embed code snippet