CSS for custom font icon with two backgrounds - css

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>

Related

Css, known height: formula to absolute place an element so that "fits" the middle of a square of that height

I know the height of the tree buttons (3rem, 3.75rem, 4.25rem). I need to place the i icon element at the right, in the middle of an imaginary square positioned at the right end of the button itself (purple area).
I've used right: 0 along with translateX(-50%) but it seems working only for the middle button (by chance). Any help is much appreciated.
.btn > i {
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translate(-100%, -50%);
}
If you know the dimensions of the icon, then you can use calculate()
lets say the icon is 10x20px
.btn > i {
width: 20px;
height: 10px;
position: absolute;
z-index: 1;
top: calculate(50% - 5px);
right: calculate(50% - 10px);
}
.btn > i:after {
display: block;
width: 20px;
height: 10px;
}
If you would like to avoid the absolute positioning, you can use flexbox:
.btn {
display: flex;
justify-content: center;
align-items: center;
}
this will effectively center any single element inside of flexbox
Just with a couple simple calc()'s and a few CSS variables this is quite simple
.btn-sm {
--btnSize: 3.00rem;
}
.btn-md {
--btnSize: 3.75rem;
}
.btn-lg {
--btnSize: 4.25rem;
}
.btn {
border: 2px solid purple;
color: purple;
display: inline-block;
font-family: sans-serif;
margin-bottom: 1rem;
position: relative;
border-radius: var(--btnSize);
line-height: var(--btnSize);
height: var(--btnSize);
padding: 0 calc( var(--btnSize) + 2rem ) 0 2rem;
}
.btn::before,
.btn::after {
position: absolute;
}
.btn::before {
inset: 0 0 0 auto;
content: "";
background: purple;
border-radius: 100%;
width: var(--btnSize);
}
.btn::after {
inset: 0 calc( var(--btnSize) / 2 ) 0 auto;
color: white;
content: "→";
transform: translateX(50%);
}
<div class="btn btn-sm">Approfondisci</div><br>
<div class="btn btn-md">Approfondisci</div><br>
<div class="btn btn-lg">Approfondisci</div><br>

Underline with different color under text

I'm trying to write CSS to get this design
Here's my CSS so far:
.exp {
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
margin-bottom: 30px;
font-style: italic;
}
.exp:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0%;
border-bottom: 1px solid #219b65;
}
HTML:
<h1 class="exp">Experience</h1>
And here's the JSFIDDLE
Any idea how to go about doing this? I did it a few years ago but couldn't get it to work again!
Here's a complete answer for you. Adjust widths to you needs.
.FromTheFounder {
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
margin-bottom: 30px;
font-style: italic;
}
.FromTheFounder:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 13px;
left: 0%;
border-bottom: 1px solid #219b65;
z-index: 1;
}
.FromTheFounder:after {
content: "";
position: absolute;
width: 300%;
height: 1px;
bottom: 13px;
left: 0%;
border-bottom: 1px solid #ccc;
}
https://jsfiddle.net/vjhg7mna/
Brett's answer will work perfectly if you know the width of your container, or want the underline to only span a certain width. If you want the underline to fill the available space, you'll need two elements - one for the full-width underline, and the other for the highlighted underline.
This would also be possible with one element using ::after in place of exp-title and setting the content property to "Experience", but that's not very user-friendly.
Note that I've made the underline significantly fatter (5px) so the effect is more obvious.
.exp {
position: relative;
font-style: italic;
border-bottom: 5px solid #ccc;
}
.exp-title {
display: inline-block;
border-bottom: 5px solid #f00;
font-weight: 300;
padding-bottom: 15px;
margin-bottom: -5px;
}
<h1 class="exp">
<span class="exp-title">Experience</span>
</h1>
For what it's worth, another option here is to use a linear-gradient background on a pseudo element, instead of an actual border.
The disadvantage here is that this option doesn't have the flexibility to automatically match the width of any arbitrary length of text in your h1. But then again, if you've got several headers, and you want the highlighted portion of the underline to be the same width for all of them, regardless of text length, this may be the way to go.
.some-container {
position: relative;
padding-bottom: 15px;
}
.exp {
font-weight: 300;
display: inline-block;
margin-bottom: 0;
font-style: italic;
}
.some-container::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0%;
background-image: linear-gradient(to right, steelblue, steelblue 25%, lightgray 25%, lightgray);
}
<div class="some-container">
<h1 class="exp">Experience</h1>
</div>

Hr class double border

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;
}

Positioning a :before selector

When adding a :before selector, in this scenario I am trying to insert a Phone Icon to appear above the .front-page-contact div. Ideally, so it would be centered above the text in the .front-page-contact div.
How could I go about positioning this selector to achieve the result mentioned above?
.front-page-contact .widget:nth-of-type(1) {
text-align: center;
}
.front-page-contact {
background-color: #00AFBE;
padding: 20px 0;
}
.front-page-contact h2 {
font-size: 26px;
color: #fff;
margin: 0;
position: relative;
}
.front-page-contact h2:before {
font-family: Ionicons;
content: "\f4b8";
font-size: 40px;
background-color: tomato;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 20px;
display: block;
position: relative;
line-height: 1em;
margin: 0 auto;
}
Screenshot:
Give h2 position: relative then the pseudo element will position itself absolutely to the h2 not to the page. Its hard to say more without seeing the markup.
EDIT:
Change it to:
.front-page-contact h2:before {
font-family: Ionicons;
content: "\f4b8";
font-size: 40px;
background-color: tomato;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 20px;
display: block;
position: absolute;
line-height: 1em;
left: calc(50% - 40px);
top: -60px;
}
Adjust left / top as necessary

How to get hovering shadow under a letter with CSS-only?

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;
}

Resources