How to add outside stroke for the text.
I tried with -webkit-text-stroke: 10px black; and text-shadow but my text becomes thinner, I want to have font size 24px.
p {
color: #fff;
text-shadow: -1px -1px 0 #844733, 1px -1px 0 #844733, -1px 1px 0 #844733, 1px 1px 0 #844733;
font-size: 24px;
}
<p>my text</p>
here is the image -> [1]: https://i.stack.imgur.com/5xMgn.png
I wanted very thick stroke and only outlide
You can use a pseudo element with identical text content to the main text and give the pseudo element the text-stroke. It was shown on CSS Tricks.
p {
color: #fff;
font-size: 24px;
position: relative
}
p:after {
content: attr(data-text);
-webkit-text-stroke: 6px #844733;
color: #844733;
position: absolute;
left: 0;
z-index: -1
}
<p data-text="my text">my text</p>
#import "compass/css3";
-webkit-text-stroke: width of stroke;
this one is pretty smooth
Related
So here is my goal, I want to have image(aka that's my logo) on top of another which is basically the background. So the background image has the logo on it and also some text and both are centered. Now here is my problem, because I set position to relative and absolute, when I resize the window, my images are not responsive, meaning the logo and the text aren't centered anymore.
So what I had to do, was put the texts and the logo in a div and make the background of that div the other image (using background-url in css) the other image background but that's not efficient. So I have this so far:
#pictures {
width: 100%;
margin-top: 0;
padding-top: 100px;
padding-bottom: 100px;
background: url('http://cdn-s-www.lalsace.fr/images/3CC1D55D-083C-44F1-B484-2D315D21D529/JDE_V0_07/(disney).jpg');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
#logo {
width: 30%;
height: auto;
padding-top: 20px;
background: none !important;
}
#line1 {
font-size: 30px;
color: white;
text-align: center;
padding-top: 40px;
margin-bottom: 4%;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
#line2 {
font-size: 30px;
color: white;
text-align: center;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
<div class=" ui centered grid">
<div id="pictures" class="ui containcer">
<h1 id="line1">Service - Awareness - Commnuity Outreach</h1>
<img id="logo" src="https://image.ibb.co/bBHabb/slide.png">
<h1 id="line2">Sophomores Leaders Impacting, Developing, and Educating</h1>
</div>
</div>
So here is my question : How can I fix the responsiveness problem without having to use the background-url property (So just have img tags in myhtml)? And fyi I am using Semantic UI instead of Bootstrap.
First, I would like to mention that this would be a great use of css grid. But to answer your question and to pick up from what you have started. In order to make your images responsive without using background you need them to have a width: 100% and a height: auto. I modified your code a bit to show this would work in your question. Notice I made a wraper class with the position of relative and an inner class with position of absolute. The inner class contains your text and can text-align: center here. Your text and logo will now be on top of the image and centered. You will need media queries to change your text size to fit within the image on smaller screens. If you want to vertically align your inner class you might want to check out this link: http://vanseodesign.com/css/vertical-centering/ for some more details.
.res-image {
width: 100%;
height: auto;
}
#logo {
width: 30%;
height: auto;
padding-top: 20px;
}
#line1 {
font-size: 30px;
color: white;
padding-top: 40px;
margin-bottom: 4%;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px
1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
#line2 {
font-size: 30px;
color: white;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
}
<div class="wrapper ui centered grid">
<img class="res-image" src="https://image.ibb.co/gjfJAR/DSC_0041.jpg">
<div class="inner ui containcer">
<h1 id="line1">Service - Awareness - Commnuity Outreach</h1>
<img id="logo" src="https://image.ibb.co/bBHabb/slide.png">
<h1 id="line2">Sophomores Leaders Impacting, Developing, and
Educating</h1>
</div>
</div>
I need to add an "outer glow" Photoshop effect to some text using CSS. Here is a screenshot of the mockup of what I am trying to acheive:
Here is the Photoshop layer settings:
I'm pretty sure this is text-shadow but I've been messing around with it and I cannot achieve a glow on all sides.
Text-shadow is what you have to use to achieve glow or some kind of text-shadow.
p{
text-shadow : horizontal-shadow vertical-shadow blur color;
}
To add multiple text-shadow, you can do that by separating them, by adding comma to text-shadow property.
p{
text-shadow : horizontal-shadow vertical-shadow blur color, horizontal-shadow vertical-shadow blur color;
}
p{
background:#111;
color:#fff;
text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
font-size:48px;
text-align:center;
}
<p>
Demo Text
</p>
There has text-shadow, first two values are x and y offsets, third value specifies the shadow blur:
text-shadow: 0 0 32px black;
body {
background-color: #00bcd4;
}
p {
margin: 30px;
color: white;
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
text-shadow: 0 0 32px black;
}
<p>Lorem ipsum dolor sit amet</p>
Are you looking for something like this?
body{
background-color: #CCAA77;
}
div{
font-size: 40px;
color: white;
text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px #553300,0px 0px 10px #553300;
}
<div>Protecting From Cancer</div>
As you can see, you can compound several text-shadow to make them more intense and mixing colors.
I encountered a problem when creating inner shadow for the text. I tried this method (some css does not work in such online-compilers, but the code is visible):
.text {
background-color: #565656;
font-size: 35px;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
<div class="text">
Text
</div>
The result is a light gray text, but I need the text of a different color. When I tried to change the text color and shadow color (not alpha), it became clear that, apparently, "background-clip: text;" do not cut the shadow in the text area, and I see a blurred silhouette outside the contours of letters.
This is what happens (the text and shadow colors are wrong here, but the overlap is visible):
And that's what I need:
By using a background color the same as main shadow color it's possible, there may be other ways but this is the most common one I know of.
Source code -- https://codepen.io/vincicat/pen/zikrC
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 2em;
line-height: 1em;
text-align:center;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10, 60, 150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection, ::selection {
background: #5af;
color: #fff;
text-shadow: none;
}
<h1 class="inset-text">Inset text-shadow trick</h1>
.text {
font-size: 50px;
display:flex;
justify-content: center;
font-stretch: ultra-expanded;
color: rgb(96, 32, 24);
background-color: rgb(186, 186, 186);
background-image: url(http://previews.123rf.com/images/auborddulac/auborddulac1201/auborddulac120100059/12000991-Dotted-yellow-background-Stock-Photo.jpg);
text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
<div class="text">
Text
</div>
See this example:
I have several boxes with white background and huge black, translucent box shadows that overlap the boxes above. However, this leads to an irritating behavior: While the white background gets darker through the overlapping box shadows, nested objects, like text or other boxes, don't!
Could anybody tell me why this occurs? I guess it has something to do with z-index. I would like prevent this - the nested objects should become darker as well. Any solutions?
Thanks in advance!
Here's the code: https://jsfiddle.net/xq20hvp4/3/
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
CSS:
div {
margin: 20px;
box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
font-size: 25px;
color: red;
font-weight: bold;
font-family: Consolas, Arial, sans-serif;
background-color: #ffffff;
}
div span {
background-color: #e7e7e7;
color: #555555;
font-weight: normal;
font-size: 17px;
padding: 1px 5px;
}
It's because those elements are on top of the div with the shadow. In order to put them behind, you can use position: relative; on the background element and give it z-index: 1:
div {
margin: 20px;
box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
font-size: 25px;
color: red;
font-weight: bold;
font-family: Consolas, Arial, sans-serif;
background-color: #ffffff;
/* Add this */
position: relative;
z-index: 1;
}
div .box {
background-color: #e7e7e7;
color: #555555;
font-weight: normal;
font-size: 17px;
padding: 1px 5px;
}
Here's an updated fiddle: https://jsfiddle.net/6wwz8usw/.
https://jsfiddle.net/fd7tx2c2/
div {
z-index: 1;
position: relative;
}
Z-index
Position
I have an HTML tag I created using CSS3. I would like to 'highlight' a particular tab. Ideally, I'd like to have a glow around the tag that shows it is active. I'm using ':after' to create the shape of the tag, but this doesn't allow me to highlight around the actual shape.
Here's a Fiddle:
http://jsfiddle.net/nocztpxv/2/
HTML
<a href="#" class="tag">
InsertHTML
</a>
CSS
.active{
border: 1px solid rgb(246, 255, 0);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(255, 252, 14, 0.6);
}
As you can see, the highlight is around everything except the arrow/triangle part. Does anyone know how I could have the same highlighted look around the arrow/triangle as well?
There is one solution that I can think of, but requires slight modification to your DOM. The solution is by wrapping the link text within a <span> element, and then instead of using borders for the triangle, we will use a rotated rectangle for that effect. However, since the background has to be higher up in the z-index than the rotated rectangle, nesting is needed (so that we declare the blue background on the <span> element instead.
See fiddle here: http://jsfiddle.net/teddyrised/nocztpxv/6/ For a three-dimensional visualisation of the stack, see here: http://jsfiddle.net/teddyrised/nocztpxv/8/
As there are only two pseudo-elements possible and you are using both ::before and ::after for stylistic purposes already, we can only use an additional level of nesting:
<a href="#" class="tag">
<span>InsertHTML</span>
</a>
<a href="#" class="tag active">
<span>InsertHTML</span>
</a>
<a href="#" class="tag">
<span>InsertHTML</span>
</a>
For the CSS (note: you might want to add vendor prefixes to the CSS transform property):
.tag {
font-family: Helvetica, Arial, sans-serif;
display: inline-block;
color: #fff;
position: relative;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: 0 30px 0 0;
text-decoration: none;
}
/* The rotated square */
.tag::after {
background-color: #588fe5;
display: block;
height: 27px;
width: 27px;
position: absolute;
top: 6px;
right: -13px;
content: "";
transform: rotate(45deg);
z-index: 1;
}
/* Nested span */
.tag > span {
display: inline-block;
background-color: #588fe5;
position: relative;
padding: 10px;
z-index: 2;
}
/* The white dot */
.tag > span::before {
background: #fff;
width: 10px;
height: 10px;
content: "";
display: inline-block;
border-radius: 20px;
margin: 0 5px 0 0;
}
/* Hover effects */
.tag:hover::after, .tag:hover > span {
background-color: #739fe4;
}
/* Active tag */
.tag.active, .tag.active::after {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(255, 252, 14, 0.6);
}