I am a web developer. for my client's website I need to put an effect on hover a specific div as shown in this website . when i hover on a div the background should change by rotating. how can i do this. I can do only ease effect for background change using css3 transition. is there any way to do the same without using jquery ?
see the scrrenshot
jsbin
I simulate your provide the animation without jquery. The key to achieve it that use the parent & chidl relation and understand the key point when animation play.
.hover{
position: relative;
width: 200px;
height: 200px;
background-color: #1cf;
}
.background{
position: absolute;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
line-height:10;
background-color: #c33;
transition: all 0.3s;
z-index: 2;
font-size: 20px;
}
.content{
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
font-size: 20px;
opacity: 0;
line-height: 10;
transform: scale(-1,1);
transition: all 0.3s;
}
.hover:hover .background{
transform: scale(-1,1);
opacity: 0;
}
.hover:hover .content{
transform: scale(1,1);
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="hover">
<div class="background">
This is background!!!
</div>
<div class="content">
This is content!
</div>
</div>
</body>
</html>
.spin{
position: relative;
top: 45%;
left: 45%;
height: 100px;
width: 100px;
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px 30px;
font-size: 25px;
font-family: thin;
text-align: center;
transition: 1.5s;
}
.spin:hover{
transform: rotate(360deg);
}
.flip{
position: relative;
top: 45%;
left: 0%;
height: 100px;
width: 100px;
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px 30px;
font-size: 25px;
font-family: thin;
text-align: center;
transition: 1.5s;
}
.flip:hover{
transform: rotateY(180deg);
background: black;
}
#font-face {
font-family: 'thin';
src: url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2');
}
<div class='spin'>Spin me!</div>
<div class='flip'>Flip me!</div>
Related
I am using a wordpress to create a site, I create some nice code for a flip card. It works fine in most browsers and even android phones. However when opening in safari on Iphone it wont work as intended.
Could somebody suggest something?
HTML CODE
<div class="flip-card2">
<div class="flip-card-inner2">
<div class="flip-card-front2">
<img src="image_url">
<div class="center_image_text2">
<p style="text-align:center;">My Title of card</p>
</div>
</div>
<div class="flip-card-back2">
<div onclick="" class="center_image_text2">
<p style="text-align:center;">My Title of card</p>
<button onclick="location.href='url_to'">Read more</button>
</div>
</div>
</div>
</div>
CSS
.flip-card2 {
background-color: transparent;
width: 100%;
height: 25rem;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card2:hover .flip-card-inner2 {
transform: rotateX(180deg);
}
.flip-card-front2, .flip-card-back2 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 0px;
}
.flip-card-front2 img{
border-radius: 0px;
width: 100%;
height: 100%;
}
.flip-card-back2 {
background-color: #224d8e;
color: white;
transform: rotateX(180deg);
}
.center_image_text2 {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 1.6rem;
}
.center_image_text2 button{
transition-duration: 0.3s;
padding: 10px;
padding-bottom: 14px;
height: 55px;
letter-spacing: 2.5px;
color: white;
border-color: white;
background-color: transparent;
border-radius: 20px;
font-size: 22px;
border: 2px solid white;
}
.center_image_text2 button:hover {
border-color: black;
color: white;
background-color: black;
}
I have tried a few things but nothing seemed to work, I hope somebody with a fresh look could help.
Creating my website and cant make my container with list of elements centerd if I want my grid responsive and have the display: block or display: inline-block and have a % width
heres a the situation im in. I want the grid with blocks to be responsive and have display: block/ display: inline-block (I have this bcs when u click on the button web scraping a button it will hide one of the blocks and I want it to float: left so one of the blocks doent center when one disperse)
$(document).ready(function(){
$("#web-scraping").click(function(){
if($("#web-s").hasClass("hide")){
$('#web-s').removeClass('hide');
}
else{
$("#web-s").addClass('hide')
}
});
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: sofia_pro;
}
a{
text-decoration: none;
}
.container{
min-height: 65vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#hero{
background-color: #32312F;
position: relative;
z-index: 1;
}
#hero .hero{
max-width: 1500px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#hero h1{
display: block;
width: fit-content;
font-size: 5rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: text_reveal_box 1s ease;
animation-delay: 0.5s;
}
#hero p{
display: block;
width: 40%;
font-size: 2rem;
margin-top: 60px;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .button-box{
margin-top: 40px;
height: 35px;
width: 140px;
}
#hero .cta{
display: inline-block;
padding: 8px 20px;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
font-size: 1.5rem;
visibility: hidden;
text-transform: uppercase;
position: relative;
transition: .3s ease background-color;
opacity: 1;
animation: box_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .cta span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: box_reveal_box 1s ease;
animation-delay: .5s;
}
#hero .cta:hover{
box-shadow:0px 0px 0px 1px #fff inset;
}
/*animation*/
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes box_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: #fff;
}
}
#keyframes box_reveal{
100%{
visibility: visible;
}
}
.down-pointer{
align-items: center;
justify-content: center;
display: flex;
position: relative;
z-index: 3;
top: -160px;
}
.down-pointer .left{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -2px 2px;
color: #f6f6f6;
}
.down-pointer .left{
transform: rotate(-45deg);
}
.work-container{
background-color: #f6f6f6;
height: 1000px;
max-width: 1300px;
border-radius: 20px 20px 0px 00px;
margin: 0px 60px;
top: -100px;
padding: 100px;
position: relative;
z-index: 2;
}
.work-category{
align-items: center;
justify-content: center;
display: flex;
}
.work-category button{
text-transform: capitalize;
border: 1px solid #32312F;
padding: 15px 30px;
font-size: 1.5rem;
font-weight: 600;
border-radius: 3px;
color: #32312F;
outline: none;
cursor: pointer;
}
.work-category button:hover{
}
#web-scraping{
margin: auto 100px auto auto;
}
#web-design{
margin: auto 0px auto 0px;
}
#web-animation{
margin: auto auto auto 100px;
}
.work-block-container .hide{
display: none;
}
.work-block-container-flex{
}
.work-block-container{
margin: 0 auto;
display: inline-block;
overflow: hidden;
width: 100%;
}
.work-block{
background-color: black;
float: left;
width: 30%;
height: 180px;
border-radius: 3px;
padding: 20px;
margin: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/media-screen.css">
<title>The HTML5 Herald</title>
</head>
<body>
<!-- Starting-menu-->
<section id=hero>
<div class="hero">
<div class="hero container">
<div>
<h1>What I can do,<span></span></h1>
<h1>for your Business<span></span></h1>
<p><span>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal distribution
</span></p>
<div class="button-box">Contact Me<span></span></div>
</div>
</div>
</div>
</section>
<!-- End-->
<!-- my work -->
<section class="work-container">
<a class="down-pointer" href="#"><span class="left"></span></a>
<div class="work-category">
<button id="web-scraping">Web Scraping</button>
<button id="web-design">Web Design</button>
<button id="web-animation">web animation</button>
</div>
<div class="work-block-container">
<div class="work-block" id="web-s"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-s"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-a"></div>
</div>
</section>
<!-- my work end -->
<!-- about me -->
<div class="container about" id="">
<h1>About</h1>
<div class="about-me-info">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!-- about me end-->
<!-- contact me -->
<!-- contact me end -->
</body>
</html>
I think you use another <div> in your container so your flex or grid display just effect on that div!
try display flex or grid on that div or make your container as your element's parents.
First, the ID for each element must be unique. I think you achieved this))
$(document).ready(function(){
$("#web-scraping").click(function(){
$(".web-d").addClass("hide")
$(".web-a").addClass("hide")
$(".web-s").removeClass("hide")
});
$("#web-design").click(function(){
$(".web-d").removeClass("hide")
$(".web-a").addClass("hide")
$(".web-s").addClass("hide")
});
$("#web-animation").click(function(){
$(".web-d").addClass("hide")
$(".web-a").removeClass("hide")
$(".web-s").addClass("hide")
});
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
}
a{
text-decoration: none;
}
.container{
min-height: 65vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#hero{
background-color: #32312F;
position: relative;
z-index: 1;
}
#hero .hero{
max-width: 1500px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#hero h1{
display: block;
width: fit-content;
font-size: 5rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: text_reveal_box 1s ease;
animation-delay: 0.5s;
}
#hero p{
display: block;
width: 40%;
font-size: 2rem;
margin-top: 60px;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .button-box{
margin-top: 40px;
height: 35px;
width: 140px;
}
#hero .cta{
display: inline-block;
padding: 8px 20px;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
font-size: 1.5rem;
visibility: hidden;
text-transform: uppercase;
position: relative;
transition: .3s ease background-color;
opacity: 1;
animation: box_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .cta span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: box_reveal_box 1s ease;
animation-delay: .5s;
}
#hero .cta:hover{
box-shadow:0 0 0 1px #fff inset;
}
/*animation*/
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes box_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: #fff;
}
}
#keyframes box_reveal{
100%{
visibility: visible;
}
}
.down-pointer{
align-items: center;
justify-content: center;
display: flex;
position: relative;
z-index: 3;
top: -160px;
}
.down-pointer .left{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -2px 2px;
color: #f6f6f6;
}
.down-pointer .left{
transform: rotate(-45deg);
}
.work-container{
background-color: #f6f6f6;
height: 1000px;
max-width: 1300px;
border-radius: 20px 20px 0px 00px;
margin: 0 60px;
top: -100px;
padding: 100px;
position: relative;
z-index: 2;
}
.work-category{
align-items: center;
justify-content: center;
display: flex;
}
.work-category button{
text-transform: capitalize;
border: 1px solid #32312F;
padding: 15px 30px;
font-size: 1.5rem;
font-weight: 600;
border-radius: 3px;
color: #32312F;
outline: none;
cursor: pointer;
}
.work-category button:hover{
}
#web-scraping{
margin: auto 100px auto auto;
}
#web-design{
margin: auto 0 auto 0;
}
#web-animation{
margin: auto auto auto 100px;
}
.work-block-container-flex{
}
.work-block-container{
margin: 0 auto;
display: inline-block;
overflow: hidden;
width: 100%;
}
.work-block{
float: left;
width: 30%;
height: 180px;
border-radius: 3px;
padding: 20px;
margin: 5px;
transition: 0.7s all;
}
.work-block.web-s{
background-color: green;
}
.work-block.web-d{
background-color: blue;
}
.work-block.web-a{
background-color: red;
}
.work-block.web-s.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
.work-block.web-d.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
.work-block.web-a.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>The HTML5 Herald</title>
</head>
<body>
<!-- Starting-menu-->
<section id=hero>
<div class="hero">
<div class="hero container">
<div>
<h1>What I can do,<span></span></h1>
<h1>for your Business<span></span></h1>
<p><span>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal distribution
</span></p>
<div class="button-box">Contact Me<span></span></div>
</div>
</div>
</div>
</section>
<!-- End-->
<!-- my work -->
<section class="work-container">
<a class="down-pointer" href="#"><span class="left"></span></a>
<div class="work-category">
<button id="web-scraping">Web Scraping</button>
<button id="web-design">Web Design</button>
<button id="web-animation">web animation</button>
</div>
<div class="work-block-container">
<div class="work-block web-s"></div>
<div class="work-block web-d"></div>
<div class="work-block web-s"></div>
<div class="work-block web-d"></div>
<div class="work-block web-d"></div>
<div class="work-block web-a"></div>
</div>
</section>
<!-- my work end -->
<!-- about me -->
<div class="container about" id="">
<h1>About</h1>
<div class="about-me-info">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!-- about me end-->
<!-- contact me -->
<!-- contact me end -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js.js"></script>
</body>
</html>
I have created a div container and within the container, there is a div box. Inside the box, I have a button that is supposed to be centered at the bottom of the box.
I have searched around and before anyone does the "duplicate post" I have tried everything that they've said. Such as, adding a "display: block;" into my code etc and still it's not centering the button into the middle. I have been messing around with whatever I can think of to try and centering the button but nothing is working.
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
bottom: 0;
padding: 7px 5px;
margin: 0 auto;
width: 40%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<button type="button" id="mainButton"> Go To Website </button>
</div>
</div>
These three values set properly on your mainButton CSS should solve your issue:
width: 40%;
left:50%;
margin-left:-20%;
Its key to note what the calculation is here. The left property is centering the item at 50% of the page, and the negative margin-left is offsetting the items position in accordance with its width. Since its width is 40% the negative margin has to be half of this, ie 20%. With this in mind you can adjust the width and the offset if your design changes, better yet using css variables and calc() mean that you could set the width only and the margin would calculate itself.
As an example:
left:50%;
--buttonWidth: 40%;
width: var(--buttonWidth);
margin-left:calc( var(--buttonWidth) / -2);
.container{
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1{
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton{
position: absolute;
bottom: 0;
padding: 7px 5px;
width: 40%;
left:50%;
margin-left:-20%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
}
.box-1:hover #mainButton{
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<a href="http://www.google.co.uk">
<button type="button" id="mainButton"> Go To Website</button>
</a>
</div>
</div>
Try with this code, i think this will help u in fixing the issue.
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
padding: 5px;
width: 60%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
Just add "left: 0; right: 0;" in #mainButton
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
bottom: 0;
padding: 7px 5px;
margin: 0 auto;
width: 40%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
left:0px;
right:0px;
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<button type="button" id="mainButton"> Go To Website </button>
</div>
</div>
It's because your button's parent is a link tag. Your button is not a direct child of the flexbox
I am wondering on what steps I should take so that I can optimise this webpage for different browsers.
If you take a look at my JSFiddle: https://jsfiddle.net/xpvt214o/137951/
when my webpage is condensed down, the elements are all over the place, and everything is only really in the correct position in full screen. How do I fix this?
HTML:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="main.js"></script>
<title>A'S COFFEE</title>
</head>
<body>
<div id="wrapper">
<div id="MenuIcon">
<div id="MenuLine"></div>
</div>
<div id="MainMenu">
<div id="logo">
<h1 class="logo">A's Coffee</h1>
</div>
<ul>
<li>HOME<div class="line"></div></li>
<li>MAKE AN ORDER<div class="line"></div></li>
<li>VIEW ORDERS<div class="line"></div></li>
</ul>
<div id="close">
<P>Click to leave</P>
</div>
</div>
<div id="centeralign">
<a class="button" id="btn1" href="place.html">Want to Place <br>an Order?</a><br>
<a class="button" id="btn2" href="#">View Orders?</a>
</div>
CSS:
body{
background-color: purple;
}
h1{
color: #e5b78e;
font-family: Arial;
font-size: 100pt;
padding: 0px;
margin: 0px;
display: block;
}
.button{
display: inline-block;
background: transparent;
text-transform: uppercase;
font-weight: bold;
font-style: normal;
font-family: Arial;
font-size: 2em;
letter-spacing: 0.2em;
color: rgba(223,190,106,0.7);
border-radius: 0;
padding: 18px 80px 20px;
transition: all 0.7s ease-out;
background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
background-position: 1% 50%;
background-size: 300% 300%;
text-decoration: none;
margin: 0.625rem;
border: none;
border: 1px solid rgba(223,190,106,0.3);
}
.button:hover{
color: #fff;
border: 1px solid rgba(223,190,106,0);
color: $white;
background-position: 99% 50%;
}
#btn1{
margin-top:30px;
display: inline-block;
padding-left: 30px;
padding-right:30px;
}
#btn2{
margin-top:30px;
display: inline-block;
padding-left: 47px;
padding-right: 47px;
}
.button:hover{
opacity: 1;
transition: opacity .2s ease-in;
}
#centeralign{
text-align: center;
top: 20em;
position: relative;
transition: all .5s ease-in-out;
}
br{
padding: 40px;
}
/* NAV */
#MenuIcon{
height: 25px;
width: 50px;
position: fixed;
top:50;
right: 50;
}
#MenuIcon:hover{
cursor: pointer;
}
#MenuLine{
height: 4px;
width: 50px;
background-color: #e5b78e;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .3s;
}
#MenuIcon:hover #MenuLine{
width: 40px;
}
#MenuLine::before{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: 10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::before{
width: 50px;
}
#MenuLine::after{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: -10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::after{
width: 50px;
}
#MainMenu{
height: 100vh;
width: 300px;
background-color: #181818;
-webkit-clip-path:polygon(0 0,100% 0,0% 100%,0% 100%);
position: fixed;
top:0;
left: -300px;
transition: all .5s ease-in-out;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
font-weight: bold;
color:white;
text-align: center;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
}
ul li{
margin: 20px;
}
ul li:hover{
cursor: pointer;
}
.line{
height: 2px;
width: 150px;
background-color: white;
margin-top: 10px;
position: absolute;
left: 50%;
transform: translate(-50%);
transition: all .3s;
}
ul li:hover .line{
width: 180px;
}
#logo{
position: absolute;
top:10%;
left: 50%;
transform: translate(-50%);
}
#close{
position: absolute;
bottom: 20%;
left: 50%;
transform: translate(-50%);
}
#close:hover{
cursor: pointer;
}
.LOGO{
font-size: 4.5em;
}
JS:
$(document).ready(function(){
$("#MenuIcon").click(function(){
$("#MainMenu").css("left","0px");
$("#MOVE").css("left","300px");
function showMenu(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,100% 0,100% 100%,0% 100%)");
$("#MenuIcon").animate({right:'-100'},300);
}
setTimeout(showMenu,100);
});
$("#close").click(function(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,0% 0,100% 100%,0% 100%)");
function hideMenu(){
$("#MainMenu").css("left","-300px");
$("#MOVE").css("left","0px")
$("#MenuIcon").animate({right:'50'},300);
}
setTimeout(hideMenu,300);
function originalLayout(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,100% 0,0% 100%,0% 100%)");
}
setTimeout(originalLayout,600);
});
});
Use media queries in your CSS to set styles for different sizes. Like so
#media only screen and (max-width: 767px) {
html {
color: #000;
}
/* styles to make page responsive */
}
This will make the text black when your page is <= 767px wide. Instead of changing the color change the layout of your elements.
You can use as many as you’d like so you can set a breakpoint at 350, 500, etc. and make your page look flawless at all different sizes. Hope that gets you started :)
For more info you can check out this link: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Am trying to get a shape drawn in css on the header of my webpage. it supposed to look like this.
The shape am trying to draw for my header
but when I try to get the exact shape, IT looks like this below (Run the snippet)
Am not so good at css so am struggling here. The codes are below.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
border-left: 280px solid white;
border-top: 20px solid white;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw"></div>
<div id="green"></div>
</section>
What Am trying to achieve with my header and shape drawing
final look I want to achieve or what it should should look like at the end
You can just create a small white rectangle at the left top, skew it and move it a little to the left to remove the green triangle:
.green {
background-color:#0f0;
height:60px;
width:100%;
}
.draw {
height:30px;
margin-left:-15%;
width:30%;
background-color:#fff;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="green">
<div class="draw">
</div>
</div>
Try using :after. See this snippet.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
position:relative;
}
#green:after{
content:'';
position:absolute;
top:0;
left:-25px;
height:30px;
width:250px;
background:white;
-moz-transform: skew(-60deg);
-webkit-transform: skew(-60deg);
transform: skew(-60deg);
}
<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!-- Mirrored from byrushan.com/projects/ma/1-6-1/jquery/light/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Jun 2016 14:12:13 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEBPAGE </title>
</head>
<body>
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw">
</div>
<div id="green"></div>
</section>
</body>
</html>
Take a look at this JSFiddle
header{
text-align:center;
padding: 5px 0;
background: grey;
color: white;
}
footer{
text-align: center;
padding: 50px 0;
position: relative;
}
footer::before,footer::after{
content: '';
display: inline-block;
width: 70%;
height: 50px;
background: green;
position: absolute;
bottom: 0;
right: -10px;
transform: skewX(-30deg);
}
footer::after{
width: 100%;
height: 30px;
transform: skewX(0);
}
#header {
width: 100%;
height: 30px;
background: #CCC;
text-align: center;
line-height: 30px;
}
#slashWrapper {
position: relative;
background: #FFF;
width: 100%;
height: 100px;
}
#whiteSlash {
height: 75px;
width: 300px;
background: #FFF;
position: absolute;
top: 0px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
#greenSlash {
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
background: #00ff00;
}
#whiteSlashBottomCorner {
height: 25px;
width: 25px;
background: #FFF;
position: absolute;
bottom: 0px;
right: -25px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
<div id="header">HEADER</div>
<div id="slashWrapper">
<div id="whiteSlash"></div>
<div id="greenSlash"></div>
<div id="whiteSlashBottomCorner">
</div>