I would like to reproduce the following logo, add a shadow below one letter as in the using only CSS.
How to do it as box-shadow overflow on both side of the letter ? I would prefer to avoid having an extra <span class="shadow"></span> following my "hovering" letter but manage it only with the letter tag/CSS rule (see HTML below).
N.B.: I'm aware of jQuery / CSS3 Animated shadow effect.
HTML
<span>Pr<span class="text-info">o</span>be</span>
CSS
element.style {
box-shadow: 0 4px 3px #AAAAAA;
position: relative;
top: -3px;
}
Using pseudo-elements (:before and :after), :hover and opacity properties, the solution looks like the following (it can be extended w/animation effects on opacity)
HTML
<div class="text-effects"><span>Pr<span class="text-info">o</span>be</span></div>
CSS
body {
font-size: 10em;
font-family: Arial;
}
div.text-effects {
text-transform:uppercase;
}
span.text-info {
position: relative;
cursor:pointer;
}
.text-info:hover {
color: #008080;
bottom: 0.1em;
}
span.text-info:before {
content: ".";
color: transparent;
position: absolute;
width: 40%;
box-shadow: 0 5px 4px -4px #303030;
display: block;
left: 30%;
bottom: 1em;
opacity:0;
}
span.text-info:after {
content: ".";
color: transparent;
position: absolute;
bottom: 0;
width: 40%;
box-shadow: 0 5px 4px -4px #303030;
display: block;
left: 30%;
bottom:0.15em;
opacity:0;
}
span.text-info:hover:before{
opacity:1;
}
span.text-info:hover:after{
opacity:1;
}
Technique
I had to use pseudo-element as described by #Alex Bell.
But instead of box-shadow I use text-shadow and tweak the pseudo-element position.
pseudo-element text is ˍ aka U+02CD MODIFIER LETTER LOW MACRON (ˍ or \u02CD)
Final result is available as a fiddle.
HTML
<div class="text-effects">
<span>Pr<span class="text-info">o</span>be</span>
</div>
CSS
body {
font-size: 10em;
font-family: Arial;
}
div.text-effects {
text-transform:uppercase;
}
span.text-info {
position: relative;
color: #008080;
bottom: 0.1em;
width: 1em;
height: 1em;
}
span.text-info:after {
bottom: 0.15em;
color: transparent;
content: "ˍ";
display: block;
font-size: 120px !important;
height: 1em;
left: 26%;
position: absolute;
text-shadow: 0 0 11px #999;
width: 1em;
}
Related
I am working on a new font icon library, and trying to get a desired result that looks like below using only CSS. I can get the single color backgrounds working with css without any issues, but trying to find the best way to do the angled second background layer in a way that will keep ratio based on the font-size used.
Here is my current wip css.
.aw-#{$app_name}:before {
content: $app_code;
}
.aw-#{$app_name}-app:before {
content: $app_code;
position: relative;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
border-bottom-right-radius: 1.25rem;
position: relative;
}
.bg-app-black {
position: relative !important;
}
.bg-app-black:before {
position: absolute;
content: "";
display:block;
width: 5rem;
height: 5rem;
border-radius: 1.25rem;
background-color: #222;
display:inline-block;
background: -0.1rem -0.1rem 0 1.5rem #000;
transform: rotate(-20deg);
}
Here is the html:
<div class="bg-app-black"><i class="aw-actions-app bg-development-app"></i></div>
Here is the results I am getting, and it doesn't scale as the font size changes.
To do it, you need to know that em unit is equal to the computed value of the font-size property of the element on which it is used. And, by default, descendants inherit font-size.
b {
position: relative;
display:inline-block;
font-size: 3rem;
}
b:before {
content: 'N';
position: relative; z-index:1;
display: inline-flex;
font-size: .8em;
width: 1.25em;
height: 1.25em;
border-radius: .3125em .3125em .3125em 0;
margin: .33em 0 0 .33em;
color: #fff;
background: #db2828;
justify-content: center;
align-items: center;
}
b:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 1em;
height: 1em;
border-radius: .25em;
background: #222;
transform: rotateZ(-20deg);
transform-origin: 0 100%;
}
<b></b>
<b style="font-size:5em"></b>
<b style="font-size:24px"></b>
I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text
I want to make background for menu list item looks as a tab, how can this be done in CSS and to add icon beside it
CSS
#cdnavheader .activeMenuItem span {
background-position: 100% -145px;
color: #2d83ab;
padding: 12px;
background-repeat: no-repeat;
color: #fff;
background-color: #2d489b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
You can also use a pseudo and transform:
a {
display: inline-block;/* fallback*/
position: relative;
overflow: hidden;
border-radius:5px 5px 0 0;
padding: 1em 3em 1em 2em;
}
a:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 120%;
height: 200%;
z-index: -1;
background: tomato;
border-radius:inherit;
transform: skew(35deg)
}
nav {
display: flex;
margin: 1em;
}
<nav> some link
some link
some link
</nav>
Use a zero height DIV with a big border:
.tab {
width: 100px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<div class="tab"></div>
More info here: https://css-tricks.com/snippets/css/css-triangle/
I'm requesting your help with a .css hr class
I'm trying to figure out how to make a double border like this:
Here's what i did:
hr.style15 {
border-top: 4px double black;
}
hr.style15:after {
content: 'SHIPPING INFO';
display: inline-block;
position: relative;
top: -15px;
left: 40px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}
My questions are:
1) How do I get rid of the inline-block below the 2 lines? I've tried by deleting the inline-block sentence but it doesn't work.
2) Can I add font-family and font size to this?
3) Is it possible to increase the space between the 2 lines without increasing the width?
Basically I believe I'd do it differently. Using both :after and :before for the lines will help you drastically on putting a text on top of it.
So I prepared this CodePen for you. Basically what I did was using an :after and a :before (as I told you before) for the border-lines and after that I added a span with a background-color (in this case white) on top of the border-lines (look at the z-index).
.container {
width: 800px;
position: relative;
}
.double-bar {
&:after {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
}
&:before {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
}
span {
z-index: 2;
position: relative;
background-color: white;
left: 40px;
padding: 0 7.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
}
}
You can see a demo of this.
I hope this helps!
Please have a check with this:-
HTML
<h1 class="title"><span>Shipping info</span></h1>
CSS
h1.title {
margin-top: 0;
position: relative;
}
h1.title:before {
content: "";
display: block;
border-top: solid 1px black;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 1;
border-bottom: 1px solid #000;
}
h1.title span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
margin-left: 50px;
}
I need to make something like this.
It´s not seen very much, bot the box with arrow is not a part of the button.It´s in the front of it. Is it possible to do this using :before selector? Buttons are classical navigation list. Thanks for your help
It most certainly is possible. You may also use an image instead of the appending the ">"
ul {
list-style: none;
}
li { background: gold;
width: 150px;
height: 30px;
line-height: 30px;
color: white;
}
li:before {
content: ">";
border-right: 1px solid white;
padding: 5px 10px 5px 10px;
margin-right: 10px;
}
<ul>
<li>Some text</li>
</ul>
Yes, you can. Make the :before element be an absolutely positioned block within the relatively positioned main button.
Then, simply give it the appropriate height, background color and border. You can use FontAwesome and the content property to set it to display an arrow.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{padding: 20px;}
div{
margin-left: 64px;
position: relative;
background: orange;
height: 64px;
color: white;
line-height: 64px;
text-indent: 20px;
font-size: 20px;
font-weight: bolder
}
div:before{
content:'';
position: absolute;
left: -134px;
top: 0;
margin-left: 64px;
height: 64px;
width: 64px;
background: orange
}
div:after{
content: '';
position: absolute;
left: -90px;
top: 16px;
margin-left: 32px;
height: 20px;
width: 20px;
border-top: 8px solid white;
border-right: 8px solid white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>Some Text </div>