Navigation bar hover effect - CSS - javascript

I am working on a navigation bar. I have uploaded an image in which I have made a red circle. I have to make that shape. How can I make it? How can I create this kind of shape in a single div
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>CSS Shape</title>
<style>
.triangletwo {
width:100px;
height:100px;
display:inherit;
opacity:0;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
clip-path: polygon(100% 0, 0 0%, 50% 80%);
}
</style>
</head>
<body>
<div style="width: 200px; height: 200px; overflow: hidden; margin: 0px; display: inline-block; clip-path: polygon(100% 0, 0 0%, 50% 80%);">
</div>
<div style="width: 100px; height: 100px; overflow: hidden; background: #6d74a3; margin-left:-100px; display: inline-block;clip-path: polygon(50% 0, 0 80%, 100% 80%);">
</div>
<div style="width: 100px; height: 100px; overflow: hidden; background: #6d74a3; margin-left:-42px; margin-bottom: -20px; display: inline-block; clip-path: polygon(100% 0, 0 0%, 50% 80%);">
<div class="triangletwo" style="display: inline-block;"></div>
</div>
</body>
</html>


Yes, you can create it using a div with text inside. Hope this help
.single-div {
background-color: #a224a2;
color: white;
font-size: 25px;
width: 150px;
height: 100px;
position: relative;
clip-path: polygon(30% 0, 40% 25%, 100% 25%, 70% 99%, 60% 76%, 0 75%);
display: flex;
}
.text {
margin: auto;
}
<div class="single-div">
<span class="text">Home</span>
</div>

Related

Making a css animation using a transparent gradient mask

I am currently making an animation that will apply a gradient mask on an image. The mask is a transparent mask and it will transform from right to left of the image. Here is my code.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100vh;
width: 100vw;
background-color: white;
position: relative;
}
.first {
background-image: url('https://i.ibb.co/17zzm7P/flower.jpg');
background-size:cover;
position: absolute;
height: 100%;
width: 100%;
-webkit-mask-image: linear-gradient(to left, transparent 0px, black 20rem, black);
-webkit-animation: rightToLeft 5s forwards;
}
#keyframes rightToLeft {
0% {
-webkit-mask-position: 100vw 0%;
mask-position: 100vw 0%;
}
100% {
-webkit-mask-position: 0vw 0vw;
mask-position: 0vw 0vw;
}
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="first"> </div>
</div>
</body>
</html>
Basically, the animation works well. However, the mask image is only applied to a specific area when it moves from right to left. Because the mask is transparent, I expect when it moves to the new area, the previous area it passed through is also transparent. How can I do to make the previous area transparent too?
Thank you so much for your time.

You are almost good, you only need to disable the repetition by using mask-repeat: no-repeat
.container {
height: 100vh;
background-color: white;
position: relative;
}
.first {
background-image: url('https://i.ibb.co/17zzm7P/flower.jpg');
background-size: cover;
position: absolute;
height: 100%;
width: 100%;
-webkit-mask-image: linear-gradient(to left, transparent, black 20rem);
-webkit-mask-repeat: no-repeat;
-webkit-animation: rightToLeft 5s forwards;
}
#keyframes rightToLeft {
0% {
-webkit-mask-position: 100vw 0%;
mask-position: 100vw 0%;
}
100% {
-webkit-mask-position: 0vw 0vw;
mask-position: 0vw 0vw;
}
}
body {
margin:0;
}
<div class="container">
<div id="first" class="first"> </div>
</div>

How can I create a single page vertical page turn effect

I want to create a calendar like set of 12 images that appear to flip up when clicked. I know about turn.js but I don't know enough javascript to start from scratch. I do have a programming background and am willing to learn but don't know where to start.
http://pageflip-books.com/index.php#ppp/page/1
is something like what I'm looking for but I want to show the top pages not the bottom ones.
Most of the examples I have found are for books/magazines with two pages side by side.
Thanks for any pointers.

I would look into CSS animations if I were you. An example can be found here: https://codepen.io/ryrocks/pen/zovXWy
HTML
<!-- https://cssdeck.com/labs/pure-css3-page-flip-effect -->
<div id="all">
<div id="page-flip">
<div id="r1">
<div id="p1">
<div>
<div></div>
</div>
</div>
</div>
<div id="p2">
<div></div>
</div>
<div id="r3">
<div id="p3">
<div>
<div></div>
</div>
</div>
</div>
<div class="s">
<div id="s3">
<div id="sp3"></div>
</div>
</div>
<div class="s" id="s4">
<div id="s2">
<div id="sp2"></div>
</div>
</div>
<a id="coke" href="#" title="Pure CSS Coke Can"></a>
<a id="meninas" href="#" title="CSS 3D Meninas"></a>
</div>
</div>
CSS
body {
padding: 0;
margin: 0;
}
#all {
width: 680px;
margin-left: auto;
margin-right: auto;
}
#page-flip {
background-image: url(https://cssdeck.com/uploads/media/items/6/6h4pDpK.jpg);
position: absolute;
padding: 40px 40px 40px 340px;
width: 300px;
height: 400px;
overflow: hidden;
}
#r1 {
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
}
#p1 {
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1030px, 500px) rotate(32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
width: 285px;
height: 388px;
background-image: url(https://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
}
#p1 > div > div {
width: 10px;
height: 388px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
}
#p2 > div {
width: 285px;
height: 388px;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
position: absolute;
z-index: 1;
background-image: url(https://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
}
#r3 {
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 2;
}
#s3 {
-webkit-transform-origin: 70px 500px;
-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 1;
}
#page-flip:hover #s3 {
-webkit-transform-origin: 325px 500px;
-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
width: 25px;
height: 1000px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
overflow: hidden;
}
#page-flip:hover #sp3 { width: 11px }
.s {
width: 285px;
height: 388px;
position: absolute;
overflow: hidden;
z-index: 3;
}
#s2 {
-webkit-transform-origin: 45px 500px;
-webkit-transform: translate(240px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
}
#sp2 {
width: 15px;
height: 1000px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
overflow: hidden;
}
#s4 {
opacity: 1;
-webkit-transition-duration: 0.5s;
}
#page-flip:hover #s4 { opacity: 0 }
#page-flip:hover #s2 {
-webkit-transform-origin: 300px 500px;
-webkit-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1255px, 500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
width: 285px;
height: 388px;
background-image: url(https://cssdeck.com/uploads/media/items/6/6S8oF28.jpg);
overflow: hidden;
}
#p3 > div > div {
width: 9px;
height: 500px;
float: right;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
}
#page-flip:hover #r1 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1000px, 500px) rotate(0deg);
}
a {
display: block;
position: absolute;
margin: -20000px 0 0 0;
padding: 1px;
z-index: 3;
-webkit-transition-property: margin;
-webkit-transition-duration: 0.01s;
}
#coke {
width: 253px;
height: 158px;
}
a:hover {
padding: 0;
border: 1px dotted #92C7C1;
}
#page-flip:hover #coke {
-webkit-transition-delay: .8s;
margin: 33px 0 0 14px;
}
#meninas {
width: 253px;
height: 167px;
}
#page-flip:hover #meninas {
-webkit-transition-delay: .8s;
margin: 203px 0 0 14px;
}
In this example hover triggers the page flip, but you can modify that to be triggered by a Javascript click event and to show the page that you prefer when the event occurs.

How to make gradient border with mouse hover 360 degree rotation

.clients-img::after {
content: '';
position: relative;
background-image: url('https://i.stack.imgur.com/Y2vyB.png');
background-repeat: no-repeat;
float: left;
margin-left: 15px;
transition: all 1.8s ease;
width: 135px;
height: 135px;
}
.clients-slider-inside img {
border-radius: 50%;
position: absolute;
padding: 14px;
left: 0px;
top: 0px;
width: 135px;
height: 135px;
}
.clients-img:hover::after {
transform: rotate(360deg) translate(0px);
}
<div class="clients-slider-inside">
<div class="clients-img"> <img src="https://i.stack.imgur.com/tz2aw.png" alt="clients img"> </div>
</div>
On Mouse hover rotate 360 degree and On Mouse out no any effect.
This type gradient border. So can you please help me for perfect rotation in circle.

You can avoid using an image and recreate the gradient using multiple linear-gradient on the background of the container. Then the idea is to rotate the whole container and rotate the image in the opposite direction so you create the effect of background rotation.
.clients-img {
display: inline-block;
position: relative;
border-radius: 50%;
background: linear-gradient(to right, #fff 50%, transparent 50%), linear-gradient(-15deg,#6fda44 25%, #fff 80%);
transition:1s all;
}
.clients-img img {
border-radius: 50%;
width: 135px;
height: 135px;
padding: 15px;
vertical-align: top;
transition:1s all;
}
.clients-img:hover {
transform: rotate(360deg);
}
.clients-img:hover img{
transform: rotate(-360deg);
}
<div class="clients-img"> <img src="https://i.stack.imgur.com/tz2aw.png" alt="clients img"> </div>

How to resize div based on screen resolution

I am creating a landing page with some interesting idea of menu. It is built with custom made hexagons. I want to make these hexacgons to fill all screen based on screen resolution. Basically i want to make them adapt to screen with no need to scroll.
my website: http://new.glstudios.lv/
<div class='grid'>
<div onclick="location.href='';" id="smallbox" ; class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Snowy Hills</h2>
<div class='desc'>Photo by Ales Krivec</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Bear</h2>
<div class='desc'>Photo by Thomas Lefebvre</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Owl</h2>
<div class='desc'>Photo by photostockeditor</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Horse</h2>
<div class='desc'>Photo by Annie Spratt</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Ice & Penguin</h2>
<div class='desc'>Photo by Teodor Bjerrang</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url( );'></div>
<div class='container'>
<h2>Pile of Logs</h2>
<div class='desc'>Photo by Ales Krivec</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url( );'></div>
<div class='container'>
<h2>Winter Tree</h2>
<div class='desc'>Photo by Mikael Kristenson</div>
</div>
</div>
</div>
And my CSS.
#smallbox {
cursor: pointer;
}
.x-main.full {
float: none;
display: block;
width: auto;
background:black;
}
#import url(https://fonts.googleapis.com/css?family=Arapey:400italic);
body {
background: white;
-webkit-font-smoothing: antialiased;
min-width: 1200px;
}
.grid {
padding: 60px;
margin: 0 auto;
max-width: 1200px;
}
.grid--item {
position: relative;
margin-top: -90px;
margin-right: 5px;
margin-left: 5px;
width: calc(33.33% - 10px);
float: left;
transition: all 0.5s;
overflow: hidden;
-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%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.grid--item:before {
display: block;
padding-top: 112.5%;
content: '';
}
.grid--item:nth-child(1), .grid--item:nth-child(2) {
margin-top: 0;
}
.grid--item:nth-child(7n - 1), .grid--item:nth-child(1) {
margin-left: 185px;
}
.img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center center;
background-size: cover;
overflow: hidden;
-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%);
}
.img:before, .img:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
opacity: 0;
transition: opacity 0.5s;
}
.img:before {
background: rgba(128, 0, 128, 0.25);
}
.img:after {
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5), transparent);
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
opacity: 0;
text-align: center;
color: white;
will-change: transform;
backface-visibility: hidden;
transform: translate(-50%, -50%) scale(0.9);
transition: all 0.5s;
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
h1,
h2 {
font-family: 'Arapey';
font-style: italic;
font-weight: 400;
}
h1 {
margin-top: 90px;
text-align: center;
font-size: 56px;
color: white;
}
h2 {
font-size: 32px;
color:white;
}
h2:before, h2:after {
display: inline-block;
margin: 0 0.5em;
width: 0.75em;
height: 0.03em;
background: turquoise;
content: '';
vertical-align: middle;
transition: all 0.3s;
}
.desc {
margin: 1em 0 0;
font-family: 'ATC Overlook';
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
line-height: 1.5;
color: turquoise;
}
.grid--item:hover .img:before,
.grid--item:hover .img:after,
.grid--item:hover .container {
opacity: 1;
}
.grid--item:hover .container {
transform: translate(-50%, -50%) scale(1);
}

Assuming your HTML is something like this:
<div id="test-div"></div>
You could do this:
$(window).resize(function() {
$('#test-div').css('width', $(window).width());
$('#test-div').css('height', $(window).height());
});
But it's very hard to tell without you posting your actual HTML/Javascript code.

You could also try adding style="overflow:auto" after the divider tag.

I'm thinking you may want to use javascript or jquery to alter the css on resize.
Something along the lines of:
$(window).resize(function() {
$('.container').css('transform','translate(-50%, -50%) scale(dynamicvaluehere);');
});
You'll want to calculate your dynamicvaluehere variable based on window height and window width.

Need help adding more photo to my parallax site

Before I start I will like to say thank you to Keith Clark for parallax code.
So am trying to create a parallax site with about 50 photo but every time I added more than six images, the images doesn't show only four show. I even tried put up online links of photo, but it still does not seem to work, I have tried adding different types of photo but it still does not work. Any ideas how to fix this?
<!DOCTYPE html>
<html>
<head>
<script src="myScript.js"></script>
<title> Loose Fit </title>
<style>
#import url(http://www.1001fonts.com/code-predators-font.html);
html {
height: 100%;
overflow: hidden;
}
.logo {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/8e/d5/8d/8ed58d031c960b6fa4e14ae965d6aed0.jpg");
position: absolute;
top: 0;
left: 0;
}
body {
margin:0;
padding:0;
perspective: 1px;
-webkit-perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
h3 {
font-size: 200%
}
h3 {
font-size: 150%
}
h4{
font-size: 100%
}
h5{
font-size: 50%
}
p {
font-size: 140%;
font-color:6699FF
line-height: 150%;
color:6699FF;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
-webkit-transform-style: inherit;
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
-webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
-webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("11.jpg");
background-attachment: fixed;
}
#slide1: {
background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2: {
background-image: url("https://download.unsplash.com/photo-1422207134147-65fb81f59e38");
background-attachment: fixed;
}
#slide3: {
background-image: url("https://download.unsplash.com/photo-1428976343495-f2c66e701b2b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4: {
background-image: url("https://download.unsplash.com/photo-1428677361686-f9d23be145c9");
background-attachment: fixed;
}
#slide5: {
background-image: url("https://download.unsplash.com/photo-1425141750113-187b6a13e28c");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide6: {
background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
background-attachment: fixed;
}
#slide7: {
background-image: url("https://download.unsplash.com/photo-1423439793616-f2aa4356b37e");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide8: {
background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
background-attachment: fixed;
}
#slide9: {
background-image: url("https://download.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
</style>
</head>
<body>
<div id="title" class="slide header">
<h1>Loose Fit Studio</h1>
<h4>Loose Fit is a hand-picked directory of the best high quality stock photography, deveryed to you.</h4>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>pic 1</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p></p>
</div>
<img src="https://download.unsplash.com/photo-1422433555807-2559a27433bd">
<img src="https://download.unsplash.com/photo-1418479631014-8cbf89db3431">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p></p>
</div>
</div>
<div id="slide4" class="slide header">
<div class="title">
</div>
</body>

I think this is just a case of poor coding (sounds like you've been staring at it for too long... happens to all of us)
In the HTML you posted you dont have a closing tag for the #slide4.
<div id="slide4" class="slide">
<div class="title">
<h1>Slide 4</h1>
<p></p>
</div>
</div>
Also in your CSS just for your Slide IDs 1-8 you have an extra colon : in the code.
#slide8: { <--remove colon
...
}
Should look like this
#slide8 {
...
}
Lastly the transform tag seemed to prevent the parallex from working correctly so i removed it.
#slide1 {
background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
Once that was cleaned up your code seemed to work well. You can see your code in action here.

Categories