Saved by @SUMON #css
body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
Need css for designed
#css #html
body{ background-image: url("img_tree.gif"); background-repeat: no-repeat; background-attachment: fixed; }
#css #shapes
<style> .circle:before { content: ' \25CF'; font-size: 50px; color: black; } </style> <span class="circle"></span>
#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*/ }
.rotate { transform: rotate(-90deg); /* Legacy vendor prefixes that you probably don
#css #webdev #text
.truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*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; } }
<h1 class="ribbon"> <strong class="ribbon-content">Everybody loves ribbons</strong> </h1>
.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; }
add_filter( 'jetpack_sharing_counts', '__return_false', 99 ); add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
#css #changingdefault #lists
ol li { list-style-type: none; } // OR li { list-style-type: none; }
#css #layout
.box-one { width: 100px; margin: 0 auto; } .box-two { width: 100px; margin-left: auto; margin-right: auto; }
#css #design #gradient
.gradient { background-image: linear-gradient( to right, red, blue, yellow, green ); }
<div class="slider"> <div class="owl-carousel owl-theme sliderLogo"> <div class="item"></div> <div class="item"></div> </div> </div> $('.sliderLogo').owlCarousel({ loop: true, stagePadding: 0, margin: 0, autoWidth: false, lazyLoad: true, autoplay: true, nav: true, navContainer: '.customNav', navText: ["<i class='fal fa-long-arrow-left'></i>", "<i class='fal fa-long-arrow-right'></i>"], dots: true, autoplayHoverPause: true, smartSpeed: 1000, onLoadLazy: lazySrcset, onInitialize: showSlider, responsive: { 0: { items: 3 } } });
//big shadow -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06); -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06); box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06); //small shadow -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06); -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06);
position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
Copy this HTML code:
Preview:
open_in_newInstructions on embedding in Medium
Comments