I have an animated line under links. It works fine for single line links but I have some links that are separated with line breaks <br>
Is there a way to have the animated underline come out along all the lines of the link?
Thanks
body {
padding: 20px;
font-family: Helvetica;
}
a {
font-weight: bold;
color: black;
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
width: 0%;
height: 2px;
bottom: 0;
background-color: #000;
transition: all 0.2s;
}
a:hover::before {
width: 100%;
}
my link
<br><br>
this is<br>a much<br>longer link
Use gradient like below:
body {
padding: 20px;
font-family: Helvetica;
}
a {
font-weight: bold;
color: black;
position: relative;
text-decoration: none;
background:linear-gradient(#000,#000) left bottom no-repeat;
background-size:0% 2px;
transition: all 0.5s;
}
a:hover {
background-size:100% 2px;
}
/* this will give another kind of animation (all lines will animate at the same time)*/
.alt {
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
my link
<br><br>
this is<br>a much<br>longer link
<br><br>
<a class="alt" href="">this is<br>a much<br>longer link</a>
Related:
How to animate underline from left to right?
How can I achieve a CSS text loading animation over multiple lines?
Related
I've created CSS for anchor text that transitions a background-color and a border-bottom using opacity. (This is done to meet the Chrome Lighthouse auditor's spec on avoiding transitions except on compositor-only effects.)
The CSS puts the transitioned items on a ::before pseudo-element built on the anchor. Notice that the pseudo-element is absolutely positioned, which is a requirement of the technique as currently constructed. It works except when the anchor text follows a line break. A working, illustrated example is provided on this CodePen.
The CSS and HTML are also provided here:
* {
margin: 0;
padding: 0;
}
body {
margin: 1em;
font-size: 24px;
line-height: 1.5;
}
header,
article {
display: inline-block;
margin: 1em;
width: 100%;
}
p {
padding-bottom: 1em;
}
ul {
list-style: none;
}
li {
float: left;
margin-right: 1em;
}
a {
background-color: transparent;
border-bottom-color: transparent;
border-bottom-style: solid;
color: blue;
text-decoration: none;
position: relative;
}
a::before {
background-color: lightgray;
border-bottom-color: blue;
border-bottom-style: solid;
content: '';
opacity: 0;
transition: opacity 500ms ease;
position: absolute;
top: -5px;
left: 0;
bottom: -5px;
right: 0;
z-index: -1;
}
a:hover::before {
opacity: 1;
}
a::after {
--icon-width: 24px;
color: blue;
content: '';
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsdWUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWV4dGVybmFsLWxpbmsiPjxwYXRoIGQ9Ik0xOCAxM3Y2YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yVjhhMiAyIDAgMCAxIDItMmg2Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iMTUgMyAyMSAzIDIxIDkiPjwvcG9seWxpbmU+PGxpbmUgeDE9IjEwIiB5MT0iMTQiIHgyPSIyMSIgeTI9IjMiPjwvbGluZT48L3N2Zz4=);
margin-left: 0.2em;
padding-left: var(--icon-width);
background-size: var(--icon-width) var(--icon-width);
background-position: center center;
background-repeat: no-repeat;
z-index: 999;
}
<body>
<header>
<ul>
<li><a href=#>Anchor 1</a></li>
<li><a href=#>Anchor 2</a></li>
<li><a href=#>Anchor 3</a></li>
</ul>
</header>
<article>
<h1>Composited transitions on border-bottom and background-color</h1>
<p>Avoid non-composited transitions! <code>opacity</code> and <code>transform</code> transitions are preferred by the Lighthouse auditor.</p>
<p>See: Stick to Compositor-Only Properties and Manage Layer Count by
Paul Lewis of Google.</p>
<p>Hover over the links to see the <code>border-bottom</code> and <code>background-color</code> fade in to cover the link text fully. This method works so long as the anchor text does not wrap across lines.</p>
<p><strong><em>Resize the window until the long link text on the line above this one wraps to a second line. At that point, the technique fails.</em></strong></p>
<p>Can you see a solution for the CSS?</p>
</article>
</body>
How would I edit the CSS so that the ::before element follows the line break of the anchor text?
I am working on Colt Steele's Aurora grove project from his bootstrap bootcamp on Udemy. Instead of using the background image that he has for the project I want to use my own background video. I've inserted it just as he did but for some reason it is not appearing. I can share the github link of the project:
https://github.com/Kazim786/sarah-calligraphy
Here is a link of the finished colt steele project someone else deployed: https://aurora-grove.herokuapp.com/index.html
(the video needs to be inserted in place of the tipis picture)
Here is the code for where the background video is to be inserted:
(#showcase is where I inserted the video link)
Koala was also used in this project
body {
font-family: cursive;;
background: pink;
}
.navbar {
font-weight: 100;
.navbar-brand h3{
font-weight: 100;
}
.nav-item{
font-size: 1.4rem;
}
.nav-link:hover{
transition: border 0.2s;
border-bottom: 1px solid white;
}
}
#showcase {
background: url("../media/video-1599785729.mp4") bottom center / cover no-repeat;
min-height: 750px;
h1{
font-family: cursive;
line-height: 1;
}
#book{
font-size: 1.5rem;
border-radius: 2rem;
}
}
#media(max-width: 760px){
.navbar{
background: #1f1f1f;
.nav-link:hover {
border-bottom: none;
}
}
#showcase {
min-height: 500px;
h1{
font-size: 4rem;
}
}
}
Please let me know if HTML is also needed and I will edit it onto here
Why not use the video tag instead? That will work for sure. Make sure the video is positioned absolute inside your #showcase container like so:
<section id="showcase" class="d-flex align-items-center justify-content-center">
<video style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
" controls=""><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></video>
... (rest of the code)...
</section>
I'm trying to keep the unicode ace of hearts U+1F0B1 white with a green body background. I'm thinking that I need to create a div with the same size as the card and set that to white. Is there a better way to do this?
This is the sample way. but you need to adjust the "text-indent" and the "letter-spacing" depending on the font-size of the unicode.
See code below
body {
background: grey;
}
i {
position: relative;
display: inline-block;
}
i::before{
content: "\1F0B1";
font-style: normal;
color: white;
display: block;
line-height: 0.8;
font-size: 150px;
background: green;
letter-spacing: -10px;
text-indent: -10px;
}
<i class="heart"></i>
You can do it in a single HTML element as well, with a pseudo-class. Similar to how icon sets work these days.
i {
background: green;
font-style: normal;
padding: 2px 4px;
}
i::before {
content: "\1F0B1";
color: white;
}
<i class="heart"></i>
I have text that appears on top of an image when you hover over the image. Originally, I also had the entire image go opaque upon hovering.
Now I've decided I want to make only a section of the image go opaque upon hovering, the part with the text. I tried the tutorial here. Unfortunately, once I made those changes, nothing appears when I hover over the image -- not the text or any opaque filter.
Here is my html file:
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<div class = "transbox">
<p> to
from</p>
</div>
</div>
/* continues on*/
Here is my css:
JFK {
position: relative;
left: 110px;
height: 300px;
width: 300px;
bottom: 40px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
font-variant: small-caps;
display: block;
}
.transbox{
margin: 30px;
background-color: $ffffff;
border: 1px solid black;
opacity: 0.6;
display: none;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.transbox p{
position: relative;
top: -90px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover transbox p {
display: block;
}
.JFK:hover{
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
I thought I had added a wrapper class as suggested here by adding the transbox div. I also tried the background-color:rgba(255,0,0,0.5); trick mentioned here. No luck -- still nothing happens upon hover. Any suggestions?
Your problem lies with these 2 pieces of code in your css:
.JFK:hover transbox p {
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
Firstly . is missing from the class transbox - is should be .transbox
Secondly there is a space between .JFK: and hover remove the space and it should all work.
.JFK:hover .transbox p {
display: block;
}
.JFK:hover .transbox{
display: block;
opacity:0.6;
}
Your code is not complete. In the "tutorial" you said you tried, <div class = "transbox"> is just a box with transparent background that is positioned above another box, with a background-image. You said you need "only a section of the image go opaque upon hovering".
Also, your CSS is not valid. "JFK" is a class, in the first row, so is ".JFK".
Then, is
.transbox {
margin: 30px;
background-color: #ffffff;
}
You wrote again with errors.
You can use:
.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;
}
I'm trying to create a custom checkbox only using css and no images, but I am having a bit of trouble.
I followed a few tutorials online, but I seem to have hit a road block and help would be great.
My css looks like this
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
input[type='checkbox']:checked {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 5px;
position: relative;
bottom: .3em;
-webkit-transform: rotate(45deg);
}
What keeps happening is when I do the rotate the whole box rotates and I have tried adding a :after to it, but it didn't seem to do anything.
You could use a unicode check, or even an icon font if you want to get really fancy...
input[type='checkbox'] {
-webkit-appearance: none;
background: #dee1e2;
width: 1.3em;
height: 1.3em;
border-radius: 3px;
border: 1px solid #555;
position: relative;
bottom: .3em;
}
/* added content with a unicode check */
input[type='checkbox']:checked:before {
content: "\2713";
left: 0.2em;
position: relative;
}
Demo
As a matter of fact I tried the same thing on my website (http://e-home.mx) but I ended up hiding the input element with css and adding a label to each one which is the one that "emulates" its behavior like this:
HTML
<input type="checkbox" id="c8" name="c8" />
<label for="c8"><span></span>Label here</label>
CSS:
input[type="checkbox"] + label{color:#000;font-family:Arial, sans-serif;}
input[type="checkbox"] + label span{
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") left top no-repeat;
cursor:pointer;
}
input[type="checkbox"] {display:none}
input[type="checkbox"]:checked + label span {
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") -19px top no-repeat;
}
Here is the fiddle:
http://jsfiddle.net/xedret/bTAGU/