I don't have much experience with HTML and CSS. I've got some problems with aligning my div content. The text (Oculus Rift, Next-generation Virtual Reality) has to be in line with de mouse scroll button, in the bottom right. But the text overlaps the div above (my sticky header). I just can't get it to work. I've hosted the site over here. I want it to look like this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>InGadget | Dé site voor al uw gadget nieuws!</title>
<meta name = "keywords" content = "InGadget | Dé site voor al uw gadget nieuws!" />
<meta name = "description" content = "InGadget is dé site voor alles over gadgets." />
<meta name="viewport" content="width=device-width">
<link href="main.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/animatescroll.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
header = document.querySelector(".navbar");
if (distanceY > shrinkOn) {
classie.add(header,"scroll");
} else {
if (classie.has(header,"scroll")) {
classie.remove(header,"scroll");
}
}
});
}
window.onload = init();
</script>
<script>
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};
$(document).scroll(function() {logoSwitch();});
logoSwitch();
</script>
</head>
<body>
<div class="navbar">
<div class="container clearfix">
<a id="logo" href="index.html"></a>
<div class="nav">
Home
Nieuws
Forum
Things I ❤
Contact
</div>
</div>
</div>
<div class="header">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
<div class="mouse-icon" onclick="$('.section1').animatescroll();" style="cursor:pointer;">
<div class="wheel"></div>
</div>
</div>
</div>
<div class="section1">
Placeholder
</div>
</body>
</html>
CSS:
/* BASICS */
#font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}
#font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
}
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
/* NAVBAR */
.navbar {
width: 100%;
height: 150px;
position: fixed;
z-index: 999;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-ms-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo.png) no-repeat;
background-size: contain;
float: left;
}
.scroll #logo {
background-image: url(images/logo2.png);
}
.nav {
float: right;
right: 0px;
}
.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #ffffff;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.nav a:hover {
text-decoration: underline;
}
/* STICKY NAVBAR */
.navbar.scroll {
background-color: #ffffff;
height: 75px;
}
.navbar.scroll#logo {
width: 140px;
height: 140px;
background: transparent url(images/logo2.png) left top no-repeat;
}
.navbar.scroll .nav a {
color: #000000;
line-height: 75px; }
/* SECTIONS */
.header {
background:
linear-gradient(to top right,
rgba(255, 65, 54, 0.5),
rgba(24, 0, 255, 0.5)
),
url(nieuws/VR/images/oculusrift.jpg) fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
}
.section1 {
margin-top: 20px;
background-color: #f2f2f2;
height: 500px;
}
/* MOUSE ICON */
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
}
.mouse-icon .wheel {
-webkit-animation-name: scrolling;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-name: scrolling;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
}
.mouse-icon .wheel {
border-radius: 10px;
background: #ffffff;
width: 6px;
height: 10px;
top: 4px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#-webkit-keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
#keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
Put the 'header-content' div inside another div with class 'header-content-container' and add this CSS:
.header-content-container {
position: absolute;
bottom: 0;
width: 100%;
}
.header-content h1{
position: absolute;
right: 20px;
bottom: 20px;
}
.mouse-icon {
position: absolute;
left: 20px;
bottom; 20px;
}
You need to position the h1 and mouseicon absolute to the bottom
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
position: absolute;
left: 10px;
bottom; 10px;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
position: absolute;
right: 10px;
bottom; 10px;
}
.header {
position:relative;
}
.header-content {
position: absolute;
bottom: 0;
right: 45px;
}
Use these styles along with your other css styles. Please Let me know if you have any other requirement.
Something like that: https://jsfiddle.net/qs1qyL9c/
.header-content {
width: 80%;
margin: auto;
position:absolute;
bottom:0;
}
Related
For some context, I am trying to add a hamburger navigation menu to the top right of my website. When you click on it and it expands out into a full page. Nothing crazy. This part actually works. It's all HTML and CSS, no JS. The rest of the website so far is a 3D globe use ArcGIS API for Javascript contained in a #sceneContainer. I've been playing around with this for a while but can't spot the issue.
There are two main issues:
I initially added the navbar #keyframe BEFORE the scene container in the main.css file, but what would happen is that the navbar would work just fine, but it is covered up by an all-white background. I could tell the globe was still rendering because right when you refresh the website it quickly appears and gets covered up. The second part of this is...
I tried putting the #keyframe AFTER the #sceneContainer which allowed the globe to become visible again, but the navbar won't open up.
Almost seems like they are overlapping each other. I want them to coexist together in the same screen where when you click on the menu it covers the whole map. I know it's probably something obvious but I'm stumped. My guess is I messed up somewhere with the sizing or something with the sceneContainer.
Any help would be super cool! 🙏
Here is my Code:
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked~.wrapper {
clip-path: circle(75%);
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
background: rgb(235, 153, 86);
transition: all 0.3s ease-in-out;
}
#active:checked~.menu-btn {
color: #fff;
}
#active:checked~.menu-btn i:before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 15px 0;
}
.wrapper ul li a {
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #fff;
}
input[type="checkbox"] {
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#sceneContainer {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
}
#keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<title>Half Earth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://js.arcgis.com/4.17/"></script>
<script src="main.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li>Home</li>
<li>Encyclopedia</li>
<li>About</li>
<li>Community</li>
<li>Feedback</li>
</ul>
</div>
<div id="sceneContainer"></div>
<!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
</body>
</html>
Well, I played with the CSS a little... tweaked some things. And I found that this did the job-
<style>
.esri-view {
z-index: -1;
position: absolute;
}
</style>
full example-
<!DOCTYPE html>
<html>
<head>
<title>Half Earth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
<!-- <link rel="stylesheet" href="main.css"> -->
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://js.arcgis.com/4.17/"></script>
<!-- <script src="main.js"></script> -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
.esri-view {
z-index: -1;
position: absolute;
}
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked~.wrapper {
clip-path: circle(75%);
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
background: rgb(235, 153, 86);
transition: all 0.3s ease-in-out;
}
#active:checked~.menu-btn {
color: #fff;
}
#active:checked~.menu-btn i:before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 15px 0;
}
.wrapper ul li a {
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #fff;
}
input[type="checkbox"] {
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#sceneContainer {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
}
#keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li>Home</li>
<li>Encyclopedia</li>
<li>About</li>
<li>Community</li>
<li>Feedback</li>
</ul>
</div>
<div id="sceneContainer"></div>
<!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
<script>
require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
const map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
const view = new SceneView({
container: "sceneContainer", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
});
</script>
</body>
</html>
Like the title says, I spent something like an hour and I can't figure why it is not working.
I just wanted to change the color and the background-color while hovering the button(a), but, even if in other sites I have no problem with similar code, in this one it doesn't seem to work.
Please help I'm going mad.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio 2</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Main -->
<section id="main">
<div class="container">
<p>Hello, my name is</p>
<p><span>M</span>ateusz <span>L</span>ipski</p>
MY PORTFOLIO
</div>
</section>
<!-- End Main -->
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?
family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Dosis", sans-serif;
}
span {
color: rgb(9, 189, 165);
font-weight: 600;
}
.program {
font-size: 1.2rem;
margin-bottom: 25px;
}
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
#main::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.3;
z-index: -1;
}
#main .container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
#main .container p {
position: relative;
color: transparent;
font-size: 2.5rem;
font-weight: 500;
margin-right: 300px;
line-height: 4rem;
animation: p_reveal 0.1s ease forwards;
}
#main .container p:first-of-type {
animation-delay: 1.2s;
}
#main .container p:nth-of-type(2) {
animation-delay: 2.7s;
}
#main .container span {
color: transparent;
animation: span_reveal 0.1s ease forwards;
animation-delay: 2.7s;
}
#main .container p::after {
content: "";
position: absolute;
height: 100%;
width: 0;
left: 0;
background-color: rgb(9, 189, 165);
overflow: hidden;
animation: box_reveal 1.5s ease forwards;
}
#main .container p:first-of-type::after {
animation-delay: 0.5s;
}
#main .container p:nth-of-type(2)::after {
animation-delay: 2s;
}
#main .container a {
padding: 10px 30px;
margin-right: 300px;
margin-top: 30px;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.2rem;
text-decoration: none;
border: 3px solid rgb(9, 189, 165);
color: rgb(9, 189, 165);
}
#main .container a:hover {
color: white;
background-color: rgb(9, 189, 165);
}
/* End Main */
You have an z-index on your main, thus you are not able to hover over your element.
if you set that z-index on your main to 1 for example, it will work.
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
edit: this block to be exact.
I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...
My navigation menu anchors are using the navigation-link class !
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
transition: left 2s, all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
border-bottom: 3px solid DarkGreen;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
So if you know a way to make it work it would be very much appreciated
You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
position: relative;
}
.navigation-link:before {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:DarkGreen;
transition: all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
left: 0;
right:0;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
<a href="#" class="navigation-link active" >Accueil</a>
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can use a pseudoelement instead of border.
To make it start from the middle, set left or right at 50% and give the pseudoelement a width of 0. On transition just increase the width to 50% and it will grow in that direction.
Adjust the left or right setting from 50% to 0, and increase the width to make it span the entire link.
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
transition: left 2s, all ease-in-out 300ms;
position: relative;
}
.navigation-link:after {
content: '';
position: absolute;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: darkgreen;
transition: width 300ms ease-in-out;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover:after {
width: 50%;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can achieve this by using :after or :before pseudo elements and by adding transform and transition property to it.
.navigation-box{
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
a.navigation-link{
position: relative;
color: #000;
text-decoration: none;
}
a.navigation-link:hover {
color: #000;
}
a.navigation-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.navigation-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
How can I make it so that the box-shadow transforms from left to right without adding the transform effect to the text itself.
This text will change sizes depending on the content so the box-shadow needs to be adjusted accordingly.
Currently my code looks like this.
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
/*box-shadow: inset 0 -1.3vw 0 0 #00f9ff; OLD SCRIPT*/
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
animation: stretchRight;
-webkit-animation: stretchRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="test1">hello darkness my old</div>
</div>
</div>
</body>
</html>
What you want to do is use a pseudo element that you can animate.
I've added the animation to the hover state for better testing
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
position: relative;
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
}
#test1 a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: #00f9ff;
transition: width .2s ease-in-out;
}
#test1 a:hover:after {
width: 100%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="test1">hello darkness my old</div>
</div>
</div>
</body>
</html>
If you want to use animation and also the same box-shadow . Make a pseudo element with the same width,height,box-shadow as the #test1 div. Also scale it to 0 at first, and then apply the animation to it.
Using animation instead of transition will let you activate the animation on page load, not on an event like hover focus etc. Which is what i think you want
see snippet below
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
position: relative;
}
#test1:before {
content: "";
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform: scaleX(0);
transform-origin: left;
animation-name: stretchRight;
animation-delay: 0.5s;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
z-index:-1;
}
a {
text-decoration: none;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="container">
<div id="test1">
hello darkness my old
</div>
</div>
I need help rotating text at the same time that the button rotates. For some reason the text is currently disappearing when I hover the mouse over the button. The text should not be disappearing; it should be rotating with the button I'm using Chrome for this project.
http://codepen.io/matosmtz/pen/oXBaQE
HTML
<body>
<div class = "container">
<section class="3d-button">
<h2>Animated Button</h2>
<p class="btn_perspective">
<button class="btn btn-3d btn-3da">Submit</button>
</p>
</section>
</div>
</body>
CSS
html, body {
font-size: 100%;
padding: 0;
margin: 0;
height: 100%;
border: 0;
}
body {
font-family: Lekton;
background: rgb(245,245,245);
}
a {
color: #888;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
height: 100%;
background: #fff;
position: relative;
}
.container > section {
margin: 0 auto;
padding: 6em 3em;
text-align: center;
}
h2 {
margin: 20px;
text-align: center;
text-transform:uppercase;
letter-spacing: 1px;
font-size: 2em;
}
.btn {
border:none;
position: relative;
background: rgb(245,245,245);
padding: 15px 40px;
display: inline-block;
text-transform: uppercase;
margin: 15px 30px;
color: inherit;
letter-spacing: 2px;
font-size: .9em;
outline: none;
-webkit-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.btn:after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.btn_perspective {
-webkit-perspective: 800px;
perspective: 800px;
display: inline-block;
}
.btn-3d {
display: block;
background: #5cbcf6;
color: white;
outline: 1px solid transparent;
transform-style: preserve-3d;
}
.btn-3d:active {
background: #55b7f3;
}
.btn-3da:after {
width: 100%;
height: 42%;
left: 0;
top: -40%;
background: #53a6d7;
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-3da:hover {
transform: rotateX(-45deg);
}
Here's the updated codepen: http://codepen.io/anon/pen/KpaGYd
Added the following code to your button:
.btn-3da:after {
z-index:1;
}
.btn-3da:hover {
position:relative;
z-index:2;
}
You can take a look into this pure CSS3 solution (works in all major web browsers: DEMO):
/*ROTATE*/
.divRotate
{
-moz-transition : all 0.8s;
-webkit-transition : all 0.8s;
-o-transition : all 0.8s;
transition : all 0.8s;
}
.divRotate:hover
{
-moz-transform : rotate(360deg);
-webkit-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
}
Add the div element to your HTML and refer the class = 'divRotate'.
Hope this may help. Best regards,