CSSrule-set versi master Markshall! Sebelum masuk ke puncak menara, ada baiknya kalian baca-baca terlebih dahulu tautan yg gue dapet. Karena ini menyangkut rule set CSS versi baru :-<
- CSS Variables - var() Function
- CSS var() function
- Using CSS custom properties (variables)
- How CSS Variables Can Improve Efficiency and Consistency
.rims {
--size: 200px;
height: var(--size);
width: var(--size);
background-image: var(--img);
background-size: contain;
background-repeat: no-repeat;
position: relative;
background-position: center center;
}
.rims::after {
content: "";
position: absolute;
width: calc(var(--size) * 0.8);
height: 100%;
top: calc(var(--size) * 0.05);
left: 50%;
transform: translateX(-50%);
background-image: var(--img);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
filter: blur(20px) opacity(70%);
}
/* Optional Tag Image into Center */
.rimss {
display: flex;
flex-flow: row wrap;
justify-items: center;
justify-content: center;
align-items: center;
}
.rims {
margin: 0 10px 35px;
}
Jika sobat mau ada efek hover sedikit, dimana ketika disorot gambar maka bayangan akan IS GONE! Ganti CSS dengan yg ini.<div class="rimss"> <div class="rims" style="--img: url(LINK_IMAGE-1);"></div> <div class="rims" style="--img: url(LINK_IMAGE-2)"></div> <div class="rims" style="--img: url(LINK_IMAGE-3)"></div> </div>
.rims {
--size: 200px;
height: var(--size);
width: var(--size);
background-image: var(--img);
background-size: contain;
background-repeat: no-repeat;
position: relative;
background-position: center center;
}
.rims::after {
content: "";
position: absolute;
width: calc(var(--size) * 0.8);
height: 100%;
top: calc(var(--size) * 0.05);
left: 50%;
transform: translateX(-50%);
background-image: var(--img);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
filter: blur(20px) opacity(70%);
transition: ease-in .5s;
}
.rims:hover::after {
filter: blur(0) opacity(0);
transition: ease-out .3s;
}
Waduh kode bentrok dengan emoticon ~X( (Ctrl + U saja buat liat kode CSS-nya yaaa!!!)
Penampakan jadi:
CSS Only Playground - Colorful Bubbles - Card pseudo-element hover - Overlapping Sushi Cards - Fading Modal - Select All... Then Select Some - Pulsating Marble - That Chicken Nugget - Content filter v2 - pure css - Photography page concept - Animated CSS Switch Button - Fullscreen Menu Enter - Menu css - Pure CSS Slideshow - Animated Buttons - border-radius playground - Contact Form Transitions with Radio Buttons - Creative Wave Button - Simple Navigation System - Folding panorama animation - CSS folded poster effect - Input placeholder hint - Pure CSS wavy surface - Glass - Mask & Css Filter - Stairs Dropdown - Kalimah Gradients - CSS Variables 3D Carousel (No JS) - Collapsible Dropdown - Clipped Image Reveal on Hover - Pure CSS Menu - #13 - Bookmark Dropdown - CSS Typing Effect - Frosted glass card overlay - 28+ CSS Image Effects - 7 Cool CSS Highlight Text Effects
Happy blogging :-bd
CloudEdit
Jika tombol download di klik dan anda tidak terkena imbas quota exceeded maka file dapat langsung di unduh. Tetapi jiga sobat terkena imbas spt berikut 
Munculah kata-kata
