I'm working on my very own website and I used this codepen
https://codepen.io/nikolamitic/pen/vpNoNq to create an animation on my name.
It works fine until I want to reduce the line-height of my elements without they hide each other (see the "j" and "p" caracters).
You can take a look here :
h1{
display:inline-block;
font-family: sans-serif;
font-size: 110px;
letter-spacing: 3px;
margin:0;
line-height: 90px;
}
h1 p{margin:0;}
/*************************************************/
/************* LETTER ANIMATION HOVER ************/
/* Thanks to https://codepen.io/nikolamitic/pen/vpNoNq */
.letter-anim{
position: relative;
color: #fff;
background-color: #222;
overflow: hidden;
cursor: pointer;
}
.letter-anim .letter-anim-dynamic,
.letter-anim .letter-anim-dynamic p {
display: flex;
justify-content: left;
align-items: center;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 2;
transition: all ease 0.7s;
}
.letter-anim .letter-anim-dynamic{
background-color: #fff;
color: #222;
overflow: hidden;
}
.letter-anim.active .letter-anim-dynamic,
.letter-anim:hover .letter-anim-dynamic {
transform: translateX(100%);
}
.letter-anim.active .letter-anim-dynamic p,
.letter-anim:hover .letter-anim-dynamic p {
transform: translateX(-100%);
}
.letter-anim-static{
font-size: 76px;
}
<h1 class="letter-anim h1-firstname">
<span class="letter-anim-static">
レ・ジェーン<br/>
</span>
<span class="letter-anim-dynamic">
<p>Lejeune</p>
</span>
</h1>
<br/>
<h1 class="letter-anim h1-lastname">
<span class="letter-anim-static">
ジョゼーフ<br/>
</span>
<span class="letter-anim-dynamic">
<p>Joseph</p>
</span>
</h1>
Thank for you help !
Just add margin-top : -10px in css for this css property letter-anim.letter-anim-dynamic p
<h1 class="letter-anim h1-firstname">
<span class="letter-anim-static">
レ・ジェーン<br/>
</span>
<span class="letter-anim-dynamic">
<p>Lejeune</p>
</span>
</h1>
<br/>
<h1 class="letter-anim h1-lastname">
<span class="letter-anim-static">
ジョゼーフ<br/>
</span>
<span class="letter-anim-dynamic">
<p>Joseph</p>
</span>
</h1>
h1{
display:inline-block;
font-family: sans-serif;
font-size: 110px;
letter-spacing: 3px;
margin:0;
line-height: 90px;
}
h1 p{margin:0;}
/*************************************************/
/************* LETTER ANIMATION HOVER ************/
/* Thanks to https://codepen.io/nikolamitic/pen/vpNoNq */
.letter-anim{
position: relative;
color: #fff;
background-color: #222;
overflow: hidden;
cursor: pointer;
}
.letter-anim .letter-anim-dynamic,
.letter-anim .letter-anim-dynamic p {
display: flex;
justify-content: left;
align-items: center;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 2;
transition: all ease 0.7s;
margin-top: -10px;
}
.letter-anim .letter-anim-dynamic{
background-color: #fff;
color: #222;
overflow: hidden;
}
.letter-anim.active .letter-anim-dynamic,
.letter-anim:hover .letter-anim-dynamic {
transform: translateX(100%);
}
.letter-anim.active .letter-anim-dynamic p,
.letter-anim:hover .letter-anim-dynamic p {
transform: translateX(-100%);
}
.letter-anim-static{
font-size: 76px;
}
It looks like the container for the h1 is just bit too small for the characters that are inside.
Try adding a simple padding:10px to h1 and the container should have more space for them.
Related
I have a button that goes up when hovered. The transition time is supposed to be 1 second but it's not working. Here is the code:
<style>
#talk-to-us {
padding: 10px!important;
height: 43px!important;
width: 148px!important;
background-color: #0ee9f5!important;
display: inline-auto!important;
margin-right: 5px;
position: relative;
transition: top ease 1.0s; /*this is not working*/
}
#talk-to-us:hover {
top: -10px;
text-decoration:underline;
}
#link {
color: white!important;
font-size: 14px!important;
padding: 10px!important;
}
</style>
<button id="talk-to-us">
<b>
<a id="link" href="#">TALK TO US!</a>
</b>
</button>
Any idea what the cause could be?
If you need a transition from something to anything... first you need to give the "something" the transition property. So just add top:0 to the origin. like this:
<style>
#talk-to-us {
padding: 10px!important;
height: 43px!important;
width: 148px!important;
background-color: #0ee9f5!important;
display: inline-auto!important;
margin-right: 5px;
position: relative;
transition: top ease 1.0s; /*this is not working*/
top:0;
}
#talk-to-us:hover {
top: -10px;
text-decoration:underline;
}
#link {
color: white!important;
font-size: 14px!important;
padding: 10px!important;
}
</style>
<button id="talk-to-us">
<b>
<a id="link" href="#">TALK TO US!</a>
</b>
</button>
the content of the website is displaying over the navigation bar when scrolling
i dont know how to fix it
flksjfjsda lf jjsdfjkldj fkjhdsjk fjkdhfjk lkfjs lkdjflksa fkjhdfjk fd
f jksdfhjksh fakjhjkds hjkh jksdjklhjkf hs
here is the html:
<body>
<header>
<p class="logo">גכשד יחכי</p>
<nav>
<ul class="nav_links">
<li>אודות</li>
<li>שירותים</li>
<li>פרוייקטים</li>
</ul>
</nav>
<a class="cta" href="https://support.microsoft.com/he-il/contactus/"><button>צור קשר</button></a>
</header>
<div class="intro"></div>
<main>
<h1 class="main-text">פסיכולוגית<br /> חינוכית</h1>
<p class="secendery-text">חשדג גשחכי היא פסיכולוגית חינוכית<br /> העוסקת במקצוע זה למעלה מ20 שנה <br /></p>
<img src="images/psychology1.png" alt="" class="side-image" />
</main>
<div class="card">
<img src="images/img_avatar.png" alt="Avatar" >
<div class="container">
<h4><b>b</b></h4>
<p> </p>
</div>
</div>
</body>
</html>
this is the css that refers to the problem:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li, a, button {
font-family: 'Rubik', sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
color: #edf0f1;
}
header {
display: flex;
background-color: #24252A;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
position: fixed;
top: 0;
width: 100%;
}
.nav_links {
list-style: none;
display: flex;
}
nav{
order:2;
}
.cta{
order:1;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color:#ddad34;
}
.main-text {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
position:absolute;
top: 32%;
right: 25%;
direction: rtl;
font-size: 60px;
color: black;
}
.secendery-text {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
position: absolute;
top: 48%;
right: 25%;
direction: rtl;
color: darkgray;
}
.side-image {
position: absolute;
top: 20%;
left: 5%;
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
.
if anyone know how can i fix this
please help
thanks
In your case you should add a z-index property for the header element. By default if the element z-index is not specified it will layer elements by the order of declaration (last html element with position: absolute/fixed will overflow previous elements with position: absolute/fixed). Try specifying the z-index property for the header
header { z-index: 100;}
in the css file.
And for the next time, try to provide a more specific overview of your problem instead of that gibberish.
I am trying to achieve a similar search form like tripadvisors (at least UI and Front Design speaking) but i have till now a few issues.
On the first photo is how is my search bar with the class name for testing purposes "asdf".
so in the second picture we have the issue, the expandable part of the form being a bit wider than the input search field.
In the third pict if with have the issue if i try to assign the same width of the rest of the form with the input["text"] field of the search form.
Below my basic html and css code.
HTML
<div class="aboutUs">
<div class="textFlexContainer">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where summer happens</span>
</h1>
<form class="search-box" action="/search">
<input class="asdf" type="search" placeholder="Explore City">
<div class="search-page">
<h3>Explore City</h3>
<ul class="search-menu-list">
<li>Our Daily Suggestions</li>
<li>Shopping</li>
<li>City Tours</li>
<li>Restaurants</li>
<li>Events</li>
<li>Things to do</li>
</ul>
<h3>Recently Reviewed</h3>
</div>
</form>
</div>
</div>
</div>
And CSS
.search-box{
display: block;
position: relative;
overflow: hidden;
z-index:15;
padding:2rem;
}
.asdf {
width: 80%;
padding:2rem;
border: none;
outline: none;
border-bottom:2px solid white;
margin-top:2.5rem;
font-size: inherit;
background-color: green;
color: #fff;
}
h3{
color:#fff;
margin-top:2rem;
}
.search-page {
height: fit-content;
background-color:green;
text-align: center;
padding:4rem 0;
transition: all 300ms ease-in-out;
display: none;
}
.search-page.visible {
display: block;
transition: all 300ms ease-in-out;
}
.search-page .search-menu-list{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.search-page .search-menu-list li{
list-style: none;
}
.search-page .search-menu-list li a:hover{
transform: translateY(-1rem);
}
.search-page .search-menu-list li a{
display: inline-block;
color:#fff;
padding:5px;
list-style: none;
text-decoration: none;
margin-right: 2.5rem;
transition: all 300ms ease-in-out;
border: solid 2px white;
border-radius: 1rem;
padding: 11px 13px 11px 14px;
margin: 10px;
}
.aboutUs{
display: grid;
background-image: linear-gradient(to right bottom, rgba(53, 170, 120, 0.8), rgba(20, 139, 102, 0.8)) ,url(../img/ch4.jpg);
background-size: cover;
background-position: center;
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
}
.textFlexContainer{
display:flex;
align-self: center;
}
.heading-primary {
color:#fff;
text-transform: uppercase;
}
.heading-primary-main{
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.8rem;
}
.text-box {
display: inline-block;
/* This content should just be in the normal flow of the page */
/*
position: absolute
top:30%;
left:50%;
transform: translate(-50% ,-50%);
*/
text-align: center;
/* Because we're using flexbox, we can center the content both horizontally and vertically
* using this declaration
*/
margin: auto;
}
Additionaly i would love if when i click on the search bar field and the form is expanding to not have the letters above the search bar to getting squeezed on the top.
Not entirely sure what you need here but here's a fix for image 3. Adding 2 lines of code to your .search-page fixes the alignment issue.
.search-page{
height: fit-content;
background-color:green;
width:80%;
text-align: center;
padding:4rem 0;
transition: all 300ms ease-in-out;
display: all;
}
The width sets it to line up with the size of the text input of the form. The margin: 0 auto; is a good way to quickly center elements in css.
I can't see the expandable part when I tested your code but have you tried changing the width to become small and then do a margin-left to move de expandable part and align it with the search?
I need to add centered horizontal line behind the link, so when I change size of the screen this line stays centered behind the link and moves with it. Also I need this line to be on the full width of screen.
On first image is what I have right now:
On the second image is what I need, as yo can see there thin gray line centered behind "V" link:
My html code of this link:
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<a class="v-explore-button" href="#about"><i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></a>
<p class="explore-text">Explore</p>
</div>
</div>
My Sass:
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
color: #ffffff;
}
.explore-container {
position: absolute;
top: 147%;
left: 38%;
.v-explore-button {
text-decoration: none;
color: #ffffff;
background-color: #2ecc71;
padding: 15px 20px;
border-radius: 100%;
}
.explore-text {
margin-top: 20px;
color: #ffffff;
}
}
How about to use ::before inline block pseudoelement for button class in pair with transform:translateY(50% of the button width);and 100% width?
body{
background-color: black;
}
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
color: #ffffff;
}
.explore-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.v-explore-button {
display: flex;
align-items: center;
position: relative;
text-decoration: none;
color: #ffffff;
background-color: #2ecc71;
padding: 15px 20px;
border-radius: 100%;
}
.explore-text {
margin-top: 20px;
color: #ffffff;
}
.explore-container:before {
content: "";
position: absolute;
top: 1em;
left: 0;
width: 100%;
height: .15em;
background-color: #00bade;
}
.inner-wrap{
margin-right: 38%;
}
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<div class="inner-wrap">
<a class="v-explore-button" href="#about"><i class="fa fa-angle-
down fa-lg" aria-hidden="true"></i></a>
<p class="explore-text">Explore</p>
</div>
</div>
</div>
My recommendation would be to use a pseudo-element such as before:
See example for the solution. Let me know if this helps.
You can use the translate property to align elements inside a
container in the middle as demonstrated below without needing to
calculate the approximate % value to align it.
Instead of giving left:38% to your explore-container, set its width to 100% and align the elements using text-align:center as shown below.
I hope this helps.
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
}
.explore-container {
position: absolute;
top: 147%;
margin:0 auto;
width:100%;
text-align:center;
}
.v-explore{
position:relative;
background:yellow;
}
.v-explore-button {
text-decoration: none;
background-color: #2ecc71;
color:#ffffff;
padding: 15px 20px;
border-radius: 100px;
position:absolute;
top:50%;
transform: translate(-50%, -50%);
}
.explore-text {
margin-top: 20px;
}
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<div class="v-explore">
<a class="v-explore-button" href="#about">v</a>
<hr>
</div>
<p class="explore-text">Explore</p>
</div>
</div>
I have tried everything, but I cannot manage to make the button smaller in the width and height.
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -4em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
If someone please can tell me a solution, I would be very grateful.
Change the CSS property of c--anim-btn class
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 24px; /* change height */
font: normal normal 700 1em/1.6em Arial, sans-serif;
overflow: hidden;
width: 100px; /* change width */
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -1.6em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
you need to adjust line height and margin top after change height because of text seen. Comment out onn css please take a look .c--anim-btn and .c--anim-btn:hover
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 128px;
font: normal normal 700 1em/8em Arial,sans-serif; /* 1em/8em means font-size/ line-height */
overflow: hidden;
width: 500px;
background-color: #3b5998;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -8em; /*Here you need to adjust after line-height change */
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>