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>
Related
I have copied the styling from this Codepen demo: https://codepen.io/CSWApps/pen/MmpBjV into my own code like so:
<style>
body {
background-color: #5c4084;
text-align: center;
padding: 50px;
}
.container {
padding: 40px 80px;
background-color: #fff;
border-radius: 8px;
}
.heading {
h1 {
background: -webkit-linear-gradient(#fff, #999);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-align: center;
margin: 0 0 5px 0;
font-weight: 900;
font-size: 4rem;
color: #fff;
}
h4 {
color: lighten(#5c3d86,30%);
text-align: center;
margin: 0 0 35px 0;
font-weight: 400;
font-size: 24px;
}
}
</style>
However, beginning with H1 my IDE highlights the line background: -webkit-linear-gradient(#fff, #999); with the error message "semi-colon expected." I can confirm that no linear gradient is being added.
If you click on settings then CSS, you can see that some older versions of Bootstrap are in use.
Note: I would recommend a newer version of Bootstrap, or better yet, Bootstrap-Vue
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>
I'm styling some and my add to cart buttons look fine but I'm trying to create circular buttons for my wish lists and I'm still seeing grey behind them. I'm thinking this might be the browsers' default styling taking over but I'm not sure, has anyone ever seen something like this?
The larger "add to cart" button looks perfect. It's so weird, here's my code and a pic
.button {
color: #fff;
background: #a4cd45;
border: 1px solid #8bb43f;
padding: 10px 20px;
font-size: 135%;
margin: 0 auto;
transition: background 0.2s cubic-bezier(0.86, 0, 0.07, 1);
border-radius: 4px
}
a.button:hover {
background: #8B0204;
border-color: #8B0204;
color: white
}
.wishlist {
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 40px;
color: white;
background-color: #a4cd45;
text-align: center;
margin: 17px 10px 0 0;
position: relative;
z-index: 2;
font-size: 90%;
cursor: pointer;
float:right
}
In .wishlist
Insert:
border:0;
If you want it to disappear.
P.S: You had border: 1px solid #8bb43f; for the other button, which would also work fine for this!
JSFiddle
Here I've made a Sample using a tag and as well using button element. Please have a look at the DEMO.
/*---------------Using Button Element-------------------*/
button.wishlist{
background-color: #a4cd45;
border-radius:50%;
height: 40px;
width: 40px;
border:0;/*If remove this property you will see a gray background as shows on image*/
color: rgba(255, 255, 255, 0);
display:block;
margin: 17px 10px 0 0;
position: relative;
outline:0;
cursor:pointer; /*Give an Effect of Clickable*/
}
button.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913; }
button.wishlist:before {
content: "\f08a";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #fff;
font-size: 18px;
position: absolute;
top: 12px;
left: 10px;
}
/*---------------Using anchor Element-------------------*/
a.wishlist{
background-color: #a4cd45;
border-radius:50%;
height: 40px;
width: 40px;
border:0;
color: rgba(255, 255, 255, 0);
display:block;
margin: 17px 10px 0 0;
position: relative;
z-index: 2;
font-size: 90%;
cursor: pointer;
float:right;
}
a.wishlist:hover:before{ text-shadow: 1px 1px 1px #ef8913;}
a.wishlist:before {
content: "\f08a";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: none;
color: #fff;
font-size: 18px;
position: absolute;
top: 12px;
left: 10px;
}
I create a button with hover and active effect but after I created it come out extra "??" on my design.
<form id="form-login">
Login
</form>
And this is my CSS, I did change my "#form-login" to ".form-login" as well but not working. Please help me to check where is did wrong. It keep show me "??" on my design.
/* Login button */
#form-login {
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
}
#form-login .login {
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
/* Background color */
margin-right: 1%;
background: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
#form-login .login:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
top: 1px;
}
I don't think it's your CSS.
Question signs ? always smell like an unicode character display problem.
Therefore the first thing to do is to check if you are using the correct encoding in your html document output. If it's not UTF-8, change it to UTF-8 and there's a good chance those question marks will "magically" turn into unicode characters instead of question marks. Just be sure to save and serve your html as UTF-8.
Hint to get you started:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
/* Login button */
#form-login
{
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
}
#form-login .login
{
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
/* Background color */
margin-right: 1%;
background: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
#form-login .login:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
top: 1px;
}
</style>
</script>
</head>
<body>
<form id="form-login">
Login
</form>
</body>
</html>
Copy-and-paste it into a new document, save it as "UTF-8", and then open it in your browser. You'll see there are no question signs ? (anymore).
Please note: I removed the useless spacing between the login text and the surrounding tag, changing > Login < to >Login<.
I am currently working with a customized jquery alert from this SITE. I am trying to achieve a gray transparent background when the alert appears but have been unsucessful. How can I get a gray transparent screen that covers the whole background behind the alertbox? Here is my EXAMPLE
CSS
<style>
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #CCC url(images/title.gif) top repeat-x;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: url(images/info.gif);
}
#popup_content.confirm {
background-image: url(images/important.gif);
}
#popup_content.prompt {
background-image: url(images/help.gif);
}
#popup_message {
padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
</style>
You need something like in this fiddle
The 'alertblanket' has an high z-index and overlays the entire page. Your dialog then must have a higher z-index to be on top of the 'alertblanket'
EDIT: You can set the color of that alert library simply by setting
$.alerts.overlayiOpacity = 0.5
$.alerts.overlayColor = '#AAA'
Or anything you like. See also the comments inside the .js file of jquery.alerts.js