Snippets Collections
// template.html
<link rel="stylesheet" href="{% static '/bulma-css/bulma-divider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static '/bulma-css/bulma-switch.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/bulma-css/bulma.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/css/main.css' %}" type="text/css"> 


// settings.py

STATIC_URL = '/static/'

STATIC_ROOT = 'avon/static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

// views.py

def template(request, self):
	return render(request, "template.html")
    
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}
 .center-me {
  margin: 0 auto;
}
<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>​
<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>
body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
}
.fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
}

.fieldset h1 {
  position: absolute;
  top: 0;
  font-size: 18px;
  line-height: 1;
  margin: -9px 0 0; /* half of font-size */
  background: #fff;
  padding: 0 3px;
}
.category-header {

  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  blur-radius: 0;
  spread-radius: 0;
  text-decoration: none;
  font-family: open-sans, lato;
  font-weight: lighter;
  font-size: 38px;
  text-align: center
  align-contents: center;
  
}
<ol><li><a href="#return">I want to return my purchase! What do I do?</a></li><li><a href="#return-a-gift">I would like to return a gift that was sent to me. How do I do that?</a></li><li><a href="#exchange">Can I exchange my order instead of returning it?</a></li><li><a href="#label-and-misplaced">I printed out my label and misplaced it. How can I retrieve it again?</a></li><li><a href="#does-it-take">How long does it take for me to get a refund?</a></li><li><a href="#international-returns">Do your pre-paid labels cover international returns?</a></li><li><a href="#gift-card-cert-return">I am returning an item purchased with a Gift Certificate or Gift Card, how does that work?</a></li><li><a href="#I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?">I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?</a></li></ol>
 .lower-canvas {
                width: 100% !important;
                height: 100% !important;
                position: relative !important;  
            }
            .upper-canvas {
                width: 100% !important;
                height: 100% !important;
                position: absolute !important;
            }
            .canvas-container {
                width: 100% !important;
                height: auto !important;
                border-radius: 20px;
            }
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>

body { color: red; }
p { text-shadow: 1px 1px 1px #000; }
function print_r(o) {
  return JSON.stringify(o,null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;'); 
}
body {
  font-size: 62.5%  /* 1em = 10px */
}
@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
.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;

}

​
.container {
  display: flex; /* or inline-flex */
}
<style>
.wrapper {
  display: flex;
  flex-direction: column
}

@media only screen and (max-width: 767px) {
  .wrapper1 {
    order: 2
  }
  .wrapper2 {
    order: 1
  }
}
</style>

<body>
  <div class="wrapper">
    <div class="wrapper1">
      <div class="col s12 l6">
        some text
      </div>
    </div>
    <div class="wrapper2">
      <div class="col s12 l6">
        some more text
      </div>
    </div>
  </div>
</body>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
 add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
                                
 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don
                                
::selection {
  background-color: #FFA;
  color: #000;
}
                                
                                @media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
                                
                                html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}
                                
<style>
@import url('https://fonts.googleapis.com/css?family=Teko&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Teko', sans-serif;
  background: #000;
}

a {
  text-decoration: none;
  color: inherit;
  font-size: 4vmin;
}

p {
  position: relative;
  text-align: center;
  font-size: 8vmin;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: .8;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 80% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  
  100% {
    background-position-x: 500%;
  }
}
</style>

<p>Welcome to my codepen profile:<br><a href="https://codepen.io/cssparadise">codepen.io/cssparadise</a></p>
const button = document.getElementById("superCoolButton");

// 1 - setting the property
// properties are in camel.Case
button.style.backgroundColor = "black"; 
button.style.color = "white";

// 2 - by using keys to set the property 
// keys are in the kebab-case
button.style["background-color"] = "black"; 
button.style["color"] = "white";

// 3 - setting the css Text property will parse it as normal css. 
button.style.cssText = "background-color:black; color:white;";
 .conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}                               
                                
 const arr = ["This", "Little", "Piggy"];
const first = arr.slice(0, 1);
const the_rest = arr.slice(1);console.log(first); // ["This"]
console.log(the_rest); // ["Little", "Piggy"]                               
                                
<style>

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

<span class="circle"></span>
ol li {
	 list-style-type: none;
     }
     
// OR

li {
	list-style-type: none;
}
.box-one {
	width: 100px;
	margin: 0 auto;
}

.box-two {
	width: 100px;
	margin-left: auto;
    margin-right: auto;
}
.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}
.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      blue,
      yellow, 
      green
    );
}
/* Linear gradient pattern */

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

/* Radial gradient pattern */

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
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*/
} 
/* if the primary input mechanism system of the device CANNOT hover */
@media (hover: none) { }

/* if the primary input mechanism system of the device can hover */
@media (hover: hover) { }
<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>
> More steps
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
> More steps
body {
	width: 100%;
	margin: 0;
	display: flex;
	min-height: 100vh; /*always have atleast the height of viewport*/
}

.main {
	display: flex;
	flex-direction: column;
}
.main__section {
	flex-grow: 1; /*magical line*/
}
.main__footer {
	margin-top: auto;
}



.block {
    &__element 				{color: red;
	    $self : &;
        #{$self}__element 	{color: green}
    }   
}

/*
	.block__element 			{color: red}
	.block__element__element 	{color: green}

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

Sun Aug 02 2020 02:24:12 GMT+0000 (UTC)

#django #css #html
bookmark
dashboard

Wed Jul 01 2020 08:52:19 GMT+0000 (UTC) https://css-tricks.com/centering-css-complete-guide/

#css
bookmark
dashboard

Wed Jul 01 2020 07:54:44 GMT+0000 (UTC) https://css-tricks.com/centering-css-complete-guide/#center-horizontally

#css #css3
bookmark
dashboard

Mon Jun 22 2020 12:58:16 GMT+0000 (UTC) https://css-tricks.com/snippets/css/corner-ribbon/

#css
bookmark
dashboard

Mon Jun 22 2020 12:57:16 GMT+0000 (UTC) https://css-tricks.com/snippets/css/drop-caps/

#css
bookmark
dashboard

Mon Jun 22 2020 12:55:43 GMT+0000 (UTC) https://css-tricks.com/snippets/css/ribbon/

#css
bookmark
dashboard

Mon Jun 22 2020 12:54:35 GMT+0000 (UTC) https://css-tricks.com/snippets/css/force-vertical-scrollbar/

#css
bookmark
dashboard

Mon Jun 22 2020 12:28:17 GMT+0000 (UTC) https://css-tricks.com/snippets/css/top-shadow/

#css
bookmark
dashboard

Mon Jun 22 2020 12:27:26 GMT+0000 (UTC) https://css-tricks.com/snippets/css/non-form-fieldset-look/

#css
bookmark
dashboard

Wed Jun 10 2020 16:28:32 GMT+0000 (UTC)

#css
bookmark
dashboard

Wed Jun 10 2020 11:16:01 GMT+0000 (UTC) https://codepen.io/sdthornton/pen/wBZdXq

#css #materialdesign #boxshadows
bookmark
dashboard

Sun Jun 07 2020 08:08:07 GMT+0000 (UTC) https://www.zappos.com/general-questions#return

#css #html #javascript
bookmark
dashboard

Sun Jun 07 2020 08:02:46 GMT+0000 (UTC) https://www.zappos.com/general-questions

#css #html #javascript
bookmark
dashboard

Sat Jun 06 2020 16:08:47 GMT+0000 (UTC)

#css
bookmark
dashboard

Wed Jun 03 2020 10:28:04 GMT+0000 (UTC) https://css-tricks.com/snippets/css/fixed-footer/

#css
bookmark
dashboard

Wed Jun 03 2020 10:27:04 GMT+0000 (UTC) https://css-tricks.com/snippets/css/compress-css-with-php/

#css
bookmark
dashboard

Wed Jun 03 2020 10:25:52 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-text-shadow/

#css
bookmark
dashboard

Fri May 29 2020 12:36:12 GMT+0000 (UTC) https://css-tricks.com/snippets/javascript/print-object-screen/

#css
bookmark
dashboard

Fri May 29 2020 12:35:11 GMT+0000 (UTC) https://css-tricks.com/snippets/css/comments-in-css/

#css
bookmark
dashboard

Fri May 29 2020 12:33:56 GMT+0000 (UTC) https://css-tricks.com/snippets/css/print-url-after-links/

#css
bookmark
dashboard

Wed May 27 2020 07:31:50 GMT+0000 (UTC)

#css
bookmark
dashboard

Fri May 22 2020 12:25:14 GMT+0000 (UTC) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
bookmark
dashboard

Tue May 19 2020 05:03:37 GMT+0000 (UTC) https://stackoverflow.com/questions/55767086/how-to-use-css-order-with-materialize

#css
bookmark
dashboard

Sun May 17 2020 06:15:19 GMT+0000 (UTC) https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

#css
bookmark
dashboard

Sat May 16 2020 19:36:39 GMT+0000 (UTC) https://codepen.io/sdthornton/pen/wBZdXq

#css #html
bookmark
dashboard

Mon May 11 2020 22:00:28 GMT+0000 (UTC) https://www.w3schools.com/css/css_grid.asp

#css
bookmark
dashboard

Mon May 11 2020 21:33:40 GMT+0000 (UTC) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

#css
bookmark
dashboard

Sat May 02 2020 22:07:47 GMT+0000 (UTC) https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275

#css
bookmark
dashboard

Fri May 01 2020 11:04:04 GMT+0000 (UTC) https://css-tricks.com/snippets/wordpress/removing-jetpack-css/

#css
bookmark
dashboard

Wed Apr 29 2020 11:36:23 GMT+0000 (UTC) https://css-tricks.com/snippets/html/start-a-web-server-with-one-terminal-command-on-os-x/

#css
bookmark
dashboard

Wed Apr 29 2020 11:26:35 GMT+0000 (UTC) https://css-tricks.com/snippets/css/text-rotation/

#css
bookmark
dashboard

Wed Apr 29 2020 11:11:47 GMT+0000 (UTC) https://css-tricks.com/snippets/css/change-text-selection-color/

#css
bookmark
dashboard

Wed Apr 29 2020 10:55:39 GMT+0000 (UTC) https://css-tricks.com/snippets/css/print-url-after-links/

#css
bookmark
dashboard

Wed Apr 29 2020 10:52:30 GMT+0000 (UTC) https://css-tricks.com/snippets/css/fluid-typography/

#css
bookmark
dashboard

Tue Apr 28 2020 20:08:07 GMT+0000 (UTC) https://codepen.io/cssparadise/pen/PoqQwxg

#css
bookmark
dashboard

Tue Apr 28 2020 19:41:37 GMT+0000 (UTC) https://twitter.com/Duiker101/status/1253341244492664837

#css
bookmark
dashboard

Tue Apr 28 2020 19:30:47 GMT+0000 (UTC) https://css-tricks.com/using-formik-to-handle-forms-in-react/

#css
bookmark
dashboard

Fri Apr 24 2020 11:55:55 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-conic-gradient/

#css #css #conic #gradient
bookmark
dashboard

Fri Apr 24 2020 11:44:23 GMT+0000 (UTC) https://css-tricks.com/snippets/javascript/getting-first-and-last-items-in-array-and-splitting-all-the-rest/

#css #css #items #array
bookmark
dashboard

Mon Mar 02 2020 22:07:43 GMT+0000 (UTC)

#css #shapes
bookmark
dashboard

Sun Feb 09 2020 19:35:52 GMT+0000 (UTC) https://love2dev.com/blog/absolute-centering-css/

#css #layout #flex
bookmark
dashboard

Wed Jan 22 2020 08:08:03 GMT+0000 (UTC)

#css #changingdefault #lists
bookmark
dashboard

Sat Jan 18 2020 20:39:59 GMT+0000 (UTC) https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

#css #layout
bookmark
dashboard

Fri Jan 10 2020 19:00:00 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-radial-gradient/

#css #design #gradient #webdev
bookmark
dashboard

Wed Jan 08 2020 19:00:00 GMT+0000 (UTC)

#css #design #gradient
bookmark
dashboard

Wed Jan 08 2020 19:00:00 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-repeating-gradients/

#css #webdev #design #gradients
bookmark
dashboard

Sun Jan 05 2020 18:59:56 GMT+0000 (UTC) https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

#css #webdev #text
bookmark
dashboard

https://www.creativebloq.com/features/css-tricks-to-revolutionise-your-layouts

#css

.

bookmark
dashboard

https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134

#css

.

bookmark
dashboard

https://www.w3schools.com/howto/howto_js_lightbox.asp,

#css #html #javascript

.

bookmark
dashboard

https://www.w3schools.com/,

#css

.

bookmark
dashboard

https://codepen.io/ananyaneogi/pen/WNerMbE

#css

.

bookmark
dashboard

https://www.w3schools.com/CSSref/pr_background-attachment.asp

#css #html

.

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension