Slider knapper

PHOTO

Wed Apr 28 2021 07:36:02 GMT+0000 (Coordinated Universal Time)

Saved by @distance #css

// i custom.js

    $('.sliderBig').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,
        dotsContainer: '.customDots',
        autoplayHoverPause: true,
        smartSpeed: 1000,
        onLoadLazy: lazySrcset,
        onInitialize: showSlider,
        responsive: {
            0: {
                items: 1
            }
        }
    });

// slut

// Reset button styling
    input, button {
        all: unset
    }


// Slider dots i bunden

.owl-dots {
    display: block;
    height: 0px !important;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    margin-top: -45px;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

.owl-dot {
    width: 10px;
    height: 10px;
    background-color: #bbb !important;
    border-radius: 50%;
    display: inline-block !important;
    margin: 2.5px;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

button.owl-dot.active {
    background-color: #ffbc00 !important;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

//slut

// SliderDots i højre side
.slider .customDots {
    position: absolute;
    bottom: 30px;
    z-index: 5;
    counter-reset: dots;
    height: 10px;
    width: 10px;
    color: #f00;
    right: 66px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
//

//Streger i højre side.

    .customDots {
        position: absolute;
        bottom: 30px;
        z-index: 5;
        counter-reset: dots;
        height: 114px;
        width: 10px;
        color: #f00;
        right: 46px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);

        &.hidden {
            display: none;
        }

        button {
            position: relative;
            background-color: transparent;
            background-image: none;
            border: none;
            box-shadow: none;
            outline: none;

            &:after {
                -moz-transition: 200ms all ease-in-out;
                -o-transition: 200ms all ease-in-out;
                -webkit-transition: 200ms all ease-in-out;
                transition: 200ms all ease-in-out;
                -moz-transition-property: all;
                -o-transition-property: all;
                -webkit-transition-property: all;
                transition-property: all;
                content: "";
                width: 3px;
                height: 30px;
                background-color: rgba(255,255,255, 0.5);
                display: inline-block !important;
                outline-style: none;
            }
            /*        &:before {
                @include transition();
                counter-increment: dots;
                content: "0" counter(dots);
                @include fontStyle(16px, $color-fontlight, 600);
                opacity: 0.7;
            }*/
            &.active, &:hover {
                &:after {
                    -moz-transition: 200ms all ease-in-out;
                    -o-transition: 200ms all ease-in-out;
                    -webkit-transition: 200ms all ease-in-out;
                    transition: 200ms all ease-in-out;
                    -moz-transition-property: all;
                    -o-transition-property: all;
                    -webkit-transition-property: all;
                    transition-property: all;
                    content: "";
                    width: 3px;
                    height: 30px;
                    background-color: white !important;
                    display: inline-block !important;
                    outline-style: none;
                }
            }
        }
    }

https://gyazo.com/4cbcec3800f84ba7e837d7c542ad8949

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

A Modern CSS Reset - Piccalilli

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

Firefox CSS backdrop-filter workaround

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

Background Image That Doesn't Scroll on Webpage

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

slick slider dots sliding

#banner .slick-dots {
	display: flex;
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
}

#banner .slick-dots li button {
	font-size: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	background: transparent;
	border-radius: 50%;
	margin: 0 5px;
}

#banner .slick-dots li.slick-active button {
	width: 20px;
	height: 20px;
	background: var(--hover);
	border-color: var(--hover);
}

#javascript #eventos #mouse #css #html

mover un elemento junto al mouse, dentro de un div (eventos de mouse)

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

Header JavaScript

const header = document.querySelector('header');
let lastScroll = 0;
const scrollThreshold = 10; 

window.addEventListener('scroll', () => {
    const currentScroll = window.scrollY;

    if (currentScroll > lastScroll && currentScroll > scrollThreshold) {
        header.classList.add('small');
    } else if (currentScroll === 0) {
        header.classList.remove('small');
    }

    lastScroll = currentScroll;
});

const hamburger = document.querySelector(".hamburger");
const navmenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navmenu.classList.toggle("active");
});

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navmenu.classList.remove("active");
}));

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*/
}

Make a circle with just CSS

<style>

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

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

CSS Grid Layout - CSS: Cascading Style Sheets | MDN

.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;
}

.c-hero__title {
  max-width: 36rem;
  text-wrap: balance;
}

#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;
}

Text Rotation in CSS

 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don

Centering Things with CSS Auto Margin

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

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

/*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;
   }
}

Browse more snippets >>