How would you achieve such effect in pure CSS ?
I easily found ressources to create a knockout text effect, but the challenge here is to combine classic knockout text effect like this with inner text shadow AND transparency to let the background image visible.
Experimental rules allowed. SVG too, but I'd prefer CSS :)
Starting from Hunter Turner answer, it's possible to improve it with CSS Blend Mode. This way the background image of the container can be blended to the text, resulting in what you wanted to do. However, remember it hasn't broad support yet.
html, body {
margin: 0;
padding: 0;
}
.container {
width: 400px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: url('http://www.designbolts.com/wp-content/uploads/2013/02/Free-Seamless-Wood-Textures-Patterns-For-3D-Mapping-2.jpg');
background-size: contain;
}
.container p {
font-weight: bold;
font-size: 60px;
font-family: Helvetica, Arial, sans-serif;
color: rgba(255, 255, 255, .45);
text-shadow: 4px 4px 6px #fff, 0 0 0 #000, 4px 4px 6px #fff;
mix-blend-mode: multiply;
}
<div class="container">
<p>Hello World</p>
</div>
You can achieve this by using rgba() for the color, paired with text-shadow.
CSS
color: rgba(255,0,0, 0.4);
text-shadow: 4px 4px 6px red, 0 0 0 #000, 4px 4px 6px red;
Example
html,body {
margin: 0;
padding: 0;
}
.container {
background-color: red;
width: 400px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.container p {
font-weight: bold;
font-size: 60px;
font-family: Helvetica, Arial, sans-serif;
color: rgba(255,0,0, 0.4);
text-shadow: 4px 4px 6px red, 0 0 0 #000, 4px 4px 6px red;
}
<div class="container">
<p>Hello World</p>
</div>
Related
I have an element with inline background color made with box-shadox, like this:
.overlay {
display: inline;
background-color: red;
box-shadow: 10px 0 0 red, -10px 0 0 red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
However, since the text also needs a border and border radius, I added an inner span.
As a consequence I need to add more box-shadow to top and bottom, but how?
I tried adding more layers to the box-shadow like this:
box-shadow: 10px 0 0 red, -10px 0 0 red, 0 10px 0 red, 0 -10px 0 red;
but it doesn't look good. How can I solve this?
You can use spread property in box-shadow to display shadow around every 4 edges of the element.
.overlay {
display: inline-block;
background-color: red;
box-shadow: 0 0 0 20px red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
display:inline-block;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
And there are tools for box-shadow that you can use to achieve the best form you want.
Please add use display: inline-block for displaying top and bottom box shadow. it will work
.overlay {
display: inline-block;
background-color: red;
box-shadow: 2px -1px 0 10px red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.overlay>span {
display: inline-block;
padding: 6px 10px;
border-radius: 4px;
border: 1px solid #fff;
margin:2px;
}
body {
padding: 20px;
color: #fff;
font-size: 20px;
}
<div class="overlay">
<span>Category</span>
</div>
Please refer to the image below:
Is it possible to implement text shadow CSS property such that only the outer periphery (stroke) of the text shadow is visible.
Use a pseudo element and style it with shadows:
:root {
--body: #FFF;
--outline: #666;
--background: #000;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
main {
min-height: 100vh;
background: var(--background);
color: var(--body);
display: grid;
place-items: center;
position: relative;
z-index: 1;
}
.outline-effect {
font-size: 4rem;
position: relative;
font-weight: 900;
}
.outline-effect::before {
font-size: 150%;
content: attr(data-outline);
position: absolute;
top: -0.333em;
left: 1em;
color: var(--background);
text-shadow: 1px 0 0 var(--outline), 0 1px 0 var(--outline), -1px 0 0 var(--outline), 0 -1px 0 var(--outline);
z-index: -1;
font-weight: 200;
}
<main>
<p class="outline-effect" data-outline="Build">Build.</p>
</main>
You can put multiple shadows that will hide each other. Play with this to get what you desired.
Snippet:
body {background-color: black;}
.demo {
margin-top: 30px;
color: white;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow:
24px -17px 0 black, /* same as background color */
25px -16px 0 white,
23px -18px 0 white,
23px -15px 0 white;
}
<div class="demo">demo</div>
Create four shadows each slightly off (↖ ↗ ↘ ↙) by 1 px, and all that behind the main shadow (white in this case):
<html>
<head>
<style>
div {
font-family: 'Arial Black', sans-serif;
font-size: 100px;
text-shadow:
20px -20px 0 white,
19px -19px 0 red,
19px -21px 0 red,
21px -21px 0 red,
21px -19px 0 red;
}
</style>
</head>
<body>
<div>Build.</div>
</body>
</html>
I think its not possible to achieve this exact effect using text-shadow, since the text at back is larger than the solid text. If you need to stick with text-shadow only, then check #Daniel Sixl's answer.
You can achieve this effect using a ::before selector and webkit-text-stroke. Be sure to match the value of data-text attribute, with the text that is inside the h1.
body{
background: #000;
/* Center Text on Screen */
display: grid;
place-items:center;
height: 100vh;
}
h1{
color: white;
font-size: 5rem;
transform: translateX(-50%);
font-family: sans-serif;
}
h1::before{
content: attr(data-text);
position: relative;
top: -0.15em;
right: -88.75%;
font-size: 1.6em;
-webkit-text-stroke: 2px grey;
-webkit-text-fill-color: transparent;
z-index: -1;
}
<h1 data-text="Build.">Build.</h1>
I want to switch button hover effect between transparent background with solid color background, but so far i ruin it :(
If someone can help me it will be great, thank you Stackoverflow.
/*################ Test Button ##########*/
.tesbtn {
color: #EE6533;
border:solid 2px #EE6533;
border-radius: 6px;
box-shadow: 0 0 20px #EE6533;
padding: 9px 9px;
font-size: 14px;
display: inline-block;
width: 130px;
margin: 10px;
float: center;
font-family: 'Nunito Sans', sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 0 0 5px #EE6533;
transition-duration: 0.4s;
-webkit-transition-duration: all 0.4s;
}
.tesbtn:hover {
background: #EE6533;
color: #fff;
box-shadow: 0 12px 16px 0 rgba(238,101,51,0.24),0 17px 50px 0 rgba(238,101,51,0.19);
}
.tesbtn:last-child {
margin-left: 5px;
}
<br/><br/>
<div style="text-align: center;">
<a class='tesbtn' href='#' target='_self'>Test</a>
<a class='tesbtn' href='#' target='_self'>Test</a>
</div>
if you want to make background transparent, you can use opacity:
try using the transform: opacity(); property
Here's what i want to accomplish:
As you can see, there's a small border at the bottom, i've tried to add border-bottom: 1px solid #c1ad6f but it results to:
Border is not fully filled cause of radius.
.btn {
background: #d5c289;
border-bottom: 6px solid #c1ad6f;
font-weight: 500;
font-size: 1.125rem;
padding: 1.25rem;
border-radius: 4px;
}
<a class="btn" href="#form" role="button">Enroll</a>
You may consider box-shadow instead of border to achieve this in a better way:
.box {
display: inline-block;
margin: 10px;
height: 100px;
width: 200px;
background: #d5c289;
box-sizing:border-box;
border-radius: 0 0 20px 20px;
}
.shadow {
box-shadow: 0 -10px 0 0 #c1ad6f inset;
animation: anime 2s infinite linear alternate;
}
.border {
border-bottom: 10px solid #c1ad6f;
animation: anime-alt 2s infinite linear alternate;
}
#keyframes anime {
from {box-shadow: 0 -1px 0 0 #c1ad6f inset;}
to {box-shadow: 0 -30px 0 0 #c1ad6f inset;}}
#keyframes anime-alt {
from {border-bottom: 1px solid #c1ad6f;}
to {border-bottom: 30px solid #c1ad6f;}}
<div class="box shadow">
Good one with box-shadow
</div>
<div class="box border">
Not good with border
</div>
This is simple trick to make border rounded using box-shadow. it will
exactly giving the output what you want.
.btn-bordered {
background: #17aa56;
color: #fff;
border-radius: 15px;
box-shadow: 0 10px #119e4d;
padding: 25px 60px 25px 90px;
}
.btn-block {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: #ddd;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: Capitialize;
letter-spacing: 1px;
font-weight: 700;
position: relative;
overflow:hidden;
}
<button class="btn-bordered btn-block" type="button">Bottom Rounded Button</button>
#AlexanderKim, you could increase border-bottom. like this: border-bottom: 5px solid #c1ad6f;. I made this fiddle: jsfiddle.net/bektkdnz but increased padding so it was easier to see
I'm trying to use box shadow to create a border around 2 html elements. I cannot user box-shadow on the button element as the performance in Android is very poor, it needs to be on each inner element. I also cannot user border proterty as again the performance is poor on some android devices. As you can see on the jsfiddle, the left and right "borders" are thicker than the top and bottom.
The solution below uses box shadow on the top, left and bottom of the em element and on the top, right and bottom of span element.
How do I make the "border" look even?
<button class="button">
<em></em>
<span class="hidden" style="display: inline;">698</span>
</button>
.button {
background: #00bdf2;
border-color: white;
border-width: 0.1rem;
border-style: solid;
float: right;
height: 3rem;
margin-right: 2.4rem;
margin-top: 0.9rem;
overflow: visible;
padding: 0;
position: relative;
z-index: 101;
border: 0;
}
input, button {
border-radius: 0;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.button em {
background-position: center center;
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
display: inline-block;
float: left;
height: 100%;
padding: 0 1rem;
width: 1.5rem;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset .1rem 0 0 .1rem #000;
}
.button > span {
background: #ffcd00;
color: #444444;
float: right;
height: 100%;
font-family: Arial;
font-size: 1.4rem;
line-height: 3rem;
padding: 0 1rem;
text-align: center;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset -.1rem 0 0 .1rem #000;
}
By moving the h-shadow to .1rem and -.1rem you are pushing the shadow left (or right) by that value, so by design, this will reveal more of the shadow on that sides.
Removing the value and having it as 0 will fix this, but will also show the shadow of the side you are trying to hide it from so this will not create the effect you are after.