WBDSGNR - Real Life Implement: css

Showing posts with label css. Show all posts

Friday, 23 August 2024

CSS FIT NO X SCROLLBAR THE HTML IN SCREEN EVENTHOUGH IMAGE OVERSIZE

/* Apply box-sizing to all elements */
*, *::before, *::after
{ box-sizing: border-box; }

/* Prevent horizontal scrolling */
html { margin: 0; padding: 0; overflow-x: hidden; }

Friday, 27 October 2023

CSS: display grid of card 3 in a row

.product-list-container {

display: grid;

grid-template-columns: repeat(3, 1fr); /* Three cards per row */

grid-gap: 20px; /* Adjust the gap between cards as needed */

}

Saturday, 21 November 2020

DOUBLE LAYER IMAGE USING CSS WORK AS WATERMARK

.overlayer {

height: 100%;

width: 100%;

background-repeat: repeat;

position: relative;

}

.overlayer:after {

content: " ";

position: absolute;

top: 0;

left: 0;

bottom: 0;

width: 100%;

height: 100%;

background-size:cover;

background-image: url(https://dev.feqjaafar.com/wp-content/uploads/2020/11/Oyen-Ramaix300.png);

background-repeat: repeat;

background-color: rgba(255, 255, 255, 0.4);

background-blend-mode: lighten;

opacity:80%

}

Thursday, 25 April 2019

Bootstrap : Navbar shrink when scroll

Saturday, 10 November 2018

CSS : Center Everything (Image) In Center Of Pages

.centered { position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); }

Thursday, 12 July 2018

Navbar hide or fade when scroll








<style>



#navbar-scroll {

  transition: top 0.5s; /* Transition effect when sliding down (and up) */

}



</style>





<body>

<script>

    var prevScrollpos = window.pageYOffset;

    window.onscroll = function() {

    var currentScrollPos = window.pageYOffset;

      if (prevScrollpos > currentScrollPos) {

        document.getElementById("navbar-scroll").style.top = "0";

      } else {

        document.getElementById("navbar-scroll").style.top = "-50px";

      }

      prevScrollpos = currentScrollPos;

    }



</script>

</body>

Tuesday, 26 June 2018

CSS Target to replace JQuery

Ok.. I just found :target on css.. freaking out!

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal
https://www.w3schools.com/cssref/sel_target.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Add animation on it to make it life

https://css-tricks.com/on-target/

here the full code of mine

https://codepad.co/snippet/WoBwuMB7

Thursday, 22 March 2018

CSS TEXT LENGTH

.class {
display: block; /* or inline-block */
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em;
line-height: 1.8em; }

Tuesday, 20 February 2018

BOX SHADOW

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

hover

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

Register/login box subtle shadow/ card shadow

box-shadow: inset 0 2px 6px 0 hsla (0, 0%, 0.2);
border-top: 6px solid #40A4F4; /* top border to bland design */

Form inset Shadow

box-shadow: inset 0 2px 4px 0 hsla (0, 0%, 0.08);

Search box or typing inside

background-color: hsl(210, 9%, 96%);

DIVIDE

Stop using border for divider use this

background: hsl(0, 0%, 98%);

Stop using border to divide menu.. use margin

margin-bottom: 48px;

ICON

Don't make the icon big, use round or square background and let the icon stay small

ref: https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

Monday, 19 February 2018

SVG CSS CLIPPER SHAPING

http://bennettfeely.com/clippy/

This will shaping your image into shape inside the css..

circle

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);

Square

-webkit-clip-path: inset(10% 10% 10% 10%);
clip-path: inset(10% 10% 10% 10%);

diamond/rhombus

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Triangle

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Messages

-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

Pentagon

-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Heksagon

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

Chevron

Left

-webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);

right

-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

Arrow

left
-webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);

right
-webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

Point left
-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);

Point Right

-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

Frame

-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

Cross
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

Monday, 12 February 2018

Add Pulse on CSS

.owl-prev ,.owl-next { ← classes where you want to add pulse
/*border: 3px solid #999;*/
/*border-radius: 30px;*/
/*background-color: blue;*/
text-align: center;
/*display: block;*/
color: white;
box-shadow: 0 0 6px black;
animation: pulsate 2s ease-out infinite; ← Change speed of pulse
}
@-webkit-keyframes pulsate {
0% { box-shadow: 0 0 0 black; }
50% { box-shadow: 0 0 6px black; } ← Distance of shadow
100% { box-shadow: 0 0 0 black; }
}

Thursday, 8 February 2018

Align Center Woocommerce Product Elements.

/* Center product elements on shop pages */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
text-align:center;
}
.woocommerce .products .star-rating, .woocommerce-page .products .star-rating {
float:none;
display:block;
margin-left:auto;
margin-right:auto;
}

Monday, 5 February 2018

CSS Material design

.header.snap {
box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,.26);
position: fixed!important;
}

.css {
padding: 32px;
float: left;
transition: box-shadow 0.15s cubic-bezier(.4,0,.2,1);
margin: 0;
}

.css:hover{
box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),
0 3px 4px 0 rgba(0,0,0,.14),
0 1px 8px 0 rgba(0,0,0,.12);
}

Wednesday, 17 January 2018

Divi Customize Menu Nav

#main-header
{
border-bottom: solid #161616 5px;
}

span.mobile_menu_bar:before
{
color: #161616 !important;
}

.et_mobile_menu
{
border-top: 3px solid #161616; !important
}
.nav li ul {

border-top: 3px solid #161616;
}

Sticky Position Css

Sunday, 8 October 2017

CSS : ALIGN MULTIPLE IMAGES HORIZONTAL

.container2{
text-align:center;

border:0px solid #666;
}

.fake_img{
display:inline-block;
margin:0;
padding:5px;

border:0px solid #CCC;
}

<div class="fake_img">Content here

</div>

<div class="fake_img">Content here </div>

<div class="fake_img">Content here</div>

</div>

Monday, 18 September 2017

DIVI FULL SCREEN SLIDE

.et_fullscreen_slider

PASTE ON <HEAD>

<script>
(function($) {
$(window).on('load resize', function() {
$('.et_fullscreen_slider').each(function() {
et_fullscreen_slider($(this));
});
});
function et_fullscreen_slider(et_slider) {
var et_viewport_height = $(window).height(),
et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
$admin_bar = $('#wpadminbar'),
$main_header = $('#main-header'),
$top_header = $('#top-header');
$(et_slider).height('auto');
if ($admin_bar.length) {
var et_viewport_height = et_viewport_height - $admin_bar.height();
}
if ($top_header.length) {
var et_viewport_height = et_viewport_height - $top_header.height();
}
if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) {
var et_viewport_height = et_viewport_height - $main_header.height();
}
if (et_viewport_height > et_slider_height) {
$(et_slider).height(et_viewport_height);
}
}
})(jQuery);
</script>

REF : CSS3 HOVER EFFECT

https://codepen.io/search/pens/?limit=all&page=3&q=hover+effect

Friday, 15 September 2017

CSS : IMAGE / TEXT FLOATING / SCALING

.floating{
/*float: left; */
display: inline-block; /* to make image center */
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;

}

@-webkit-keyframes Floatingx{
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px); }
}

@-moz-keyframes Floating{
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}

.scaling{
/* float: left; */
display: inline-block; /* to make image center */
-webkit-animation-name: scalex;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-name: scale;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease-in-out;
}

@-webkit-keyframes scalex{
from {-webkit-transform: scale(0.9);}
65% {-webkit-transform: scale(1.0);}
to {-webkit-transform: scale(0.9);}
}

@-moz-keyframes scale{
from {-moz-transform: scale(0.9);}
65% {-moz-transform: scale(1.0);}
to {-moz-transform: scale(0.9);}
}

Thursday, 14 September 2017

DlVl CSS KEN BURN EFFECT

Css ni buat slider atau image bergerak. untuk DlVl. Header atau slider.

ref : https://www.elegantthemes.com/blog/divi-resources/ken-burns-effect-divi

.kb-zoomout .et_pb_slide .et_parallax_bg {
animation: zoomout 7s forwards;
-ms-animation: zoomout 7s forwards;
-webkit-animation: zoomout 7s forwards;
-0-animation: zoomout 7s forwards;
-moz-animation: zoomout 7s forwards;

}

.kb-zoomin .et_pb_slide .et_parallax_bg {
animation: zoomin 7s forwards;
-ms-animation: zoomin 7s forwards;
-webkit-animation: zoomin 7s forwards;
-0-animation: zoomin 7s forwards;
-moz-animation: zoomin 7s forwards;

}

.kb-zoomin-right .et_pb_slide .et_parallax_bg {
animation: zoomin-right 7s forwards;
-ms-animation: zoomin-right 7s forwards;
-webkit-animation: zoomin-right 7s forwards;
-0-animation: zoomin-right 7s forwards;
-moz-animation: zoomin-right 7s forwards;

}

.kb-zoomout-right .et_pb_slide .et_parallax_bg {
animation: zoomout-right 7s forwards;
-ms-animation: zoomout-right 7s forwards;
-webkit-animation: zoomout-right 7s forwards;
-0-animation: zoomout-right 7s forwards;
-moz-animation: zoomout-right 7s forwards;

}

.kb-zoomout .et_parallax_bg {
animation: zoomout 17s forwards;
-ms-animation: zoomout 17s forwards;
-webkit-animation: zoomout 17s forwards;
-0-animation: zoomout 17s forwards;
-moz-animation: zoomout 17s forwards;

}

.kb-zoomin .et_parallax_bg {
animation: zoomin 17s forwards;
-ms-animation: zoomin 17s forwards;
-webkit-animation: zoomin 17s forwards;
-0-animation: zoomin 17s forwards;
-moz-animation: zoomin 17s forwards;

}

.kb-zoomin-right .et_parallax_bg {
animation: zoomin-right 7s forwards;
-ms-animation: zoomin-right 17s forwards;
-webkit-animation: zoomin-right 17s forwards;
-0-animation: zoomin-right 17s forwards;
-moz-animation: zoomin-right 17s forwards;

}

.kb-zoomout-right .et_parallax_bg {
animation: zoomout-right 7s forwards;
-ms-animation: zoomout-right 17s forwards;
-webkit-animation: zoomout-right 17s forwards;
-0-animation: zoomout-right 17s forwards;
-moz-animation: zoomout-right 17s forwards;

}

@keyframes zoomout{
0% {
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}

100% {
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin{
0%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
animation-timing-function: linear;

}

100%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomout-right{
0%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
animation-timing-function: linear;
}

100%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin-right{
0%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}

100%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);

}
}