I have a button being used in an overlay. I can't see why the text shadow won't display on the "find out more" text within the button.
HTML:
Find out more<img src="img/glyphicons-224-chevron-right.png" class="chevronr" alt="some_text">
CSS:
.apply {
display: inline-block;
background: linear-gradient(#98e901 ,#5ba119);
vertical-align: middle;
box-shadow: 0 4px 0 rgba(69,69,69,.11);
text-align: center;
text-shadow: 0, 4, 4, 0;
border-radius: 4px;
padding-top: 8px;
padding-right: 42px;
padding-bottom: 8px;
padding-left: 42px;
color: #fff;
font-family: Raleway, arial, helvetica, sans-serif;
font-weight: 800;
font-size: 28px;
line-height: 50px;
margin-bottom: 30px;
letter-spacing: -1px;
}
I can't see anything in my styling that would conflict but when testing the browser isn't rendering the text shadow?
Your text-shadow property is invalid. With 4 properties, it should be of the format offset-x offset-y blur-radius color or color offset-x offset-y blur-radius. Note the use of space separators rather than the comma separators - commas are used to separate multiple shadows.
To rewrite the example provided in your question, making assumptions about the intent, it would be:
text-shadow: 0 4px 4px #000;
More information on text-shadow
Try like this: Demo 1
text-shadow: 2px 2px 2px #000;
or like this: Demo 2
text-shadow: 0px 4px rgba(0, 4, 4, 0.4);
You have used
text-shadow: 0, 4, 4, 0;
Which, unfortunately, has a few things wrong with it.
The Text-shadow property takes the values of
Value: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
This property accepts a comma-separated list of shadow effects to be
applied to the text of the element. The shadow effects are applied in
the order specified and may thus overlay each other, but they will
never overlay the text itself. ~ w3.org
This means that it takes only three values, and not four.
You are also missing units for your declaration (I have used px for this demo).
text-shadow: 3px 3px 5px red;
is a valid declaration.
where it will
place a shadow to the right and below the element's text. The shadow will have a 5px blur radius and will be red.
Text-shadow is used usuall with px formatted numbers so
text-shadow: 0, 4, 4, 0;
must be
text-shadow: 0px 4px 4px ;
Related
I have my column's borders change size when they are hovered on. But it moves the position of my image below them. I tried increasing the margin bottom of the columns so that it doesn't effect the image. But that did not work. I also tried using the z-index property, but that had no effect as well. What is the best way to fix this issue?
Code Pen: https://codepen.io/isaiahwebdev/pen/zWjyEJ
.plans-col {
width: 33.33%;
float: left;
padding: 10px;
margin-bottom: 40px;
text-align: center;
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
.plans-price .title {
margin: 50px 0;
}
It's because of a border that is different width when you hover. Whenever you are applying any transformation, the borders need to stay the same width. The trick is to apply the transparent border for the object before hover.
.plans-price {
list-style: none;
border: 10px solid transparent;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082);
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
Now, I have seen that your original plans-price had border of 1px. You have a few options here:
use my solution where object doesn't have initial border,
keep my solution for the transparent border but add 'faux border' using solid inset box-shadow of 1 px and the desired color or
change the initial border width to 10px
Enjoy :)
I want to style different hyperlinks in different ways. Right now, I have a button that is a hyperlink, and I want to add a text that should act like a hyperlink too. How do I do this without styling both hyperlinks together. I want each hyperlink to have different colors, positioning etc.
CSS
.example2 {
text-decoration: none;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CC4A31;
color: #444;
border-radius: 9px;
position: absolute;
top: 16px;
left: 38px;
height: 50px;
width: 145px;
webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
vertical-align: middle;
text-align: center;
line-height: 50px;
}
.example {
color: black;
}
HTML
<div class="example2">
GameTrade
</div>
<div class="example">
Sign in
</div>
Now how do I add another hyperlink, that is styled separately?
What you call styles, is, in case you don't know also called CSS, which stands for Cascade Style Sheets, this type of language allows you among other things to specify an hierarchy between rules.
Having said this, in CSS you can have 3 basic types of style rules, the ones that target the TAG of elements, the ones that target the class of elements (<a class="foo">my link</a>) and the ones that target elements by ID (<a id="btnSubmit">submit</a>), I obviously hide much information here with the intent to make it simple for you to understand.
So to achieve your end, you can create a rule that targets elements with TAG <a>, and in rule you specify the properties that are generic to all links.
This gives you what you already have, now to target different links you have two options or you give then diferente IDs and you target each separately, or you add one class to the class attribute so you can distinguish between both.
Here is an example:
HTML
<a class="link-trade1" href="">GameTrade 1</a><br/>
<a class="link-trade2" href="">GameTrade 2</a>
CSS
a {
text-decoration: none;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CC4A31;
color: #444;
border-radius: 9px;
webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
vertical-align: middle;
text-align: center;
}
.link-trade1{
position: absolute;
top: 16px;
left: 38px;
height: 50px;
line-height: 50px;
width: 145px;
}
.link-trade2{
position: absolute;
top: 16px; /* other y position for the link 2 */
left: 38px; /* other x position for the link 2 */
height: 50px;
line-height: 50px;
width: 145px;
}
You can switch the class name for IDs if you don't intent to reuse the rules targeting that specific classes.
Anyway there is a very good book you can read, if you are new to CSS and HTML, by Freeman.
Happy Coding.
Update
The updated question is a good example, just watch this:
/* this rule targets all hyperlinks inside, elements (div in your case) with attribute class="example" */
.example a{
...
}
/* this rule targets all hyperlinks inside, elements with attribute class="example2" */
.example2 a{
...
}
So as you can see, remember the hierarchy I was talking about? Is because of this, in the example just above you first target specific div's the ones with example class or example2 class and then you specify which elements to style inside them. You can build more elaborated rules!
Using your HTML
<div class="example2">
GameTrade
</div>
<div class="example">
Sign in
</div>
I'm guessing the styling isn't working because there is CSS overriding yours. Try this CSS:
.example2 a {
color: #444;
}
.example a {
color: black;
}
If that doesn't work try adding !important tags.
I have a problem with the CSS precedence of an input box. A width of 96% is being applied while according to precedence rules an auto width should be applied. If I apply !important, the style I want is applied. However this is not how I would like to solve the problem.
I have an input box implemented in this way
<fieldset>
<label>Search</label>
<input type="text" class="standard-size"> <!-- Referring to this -->
</fieldset>
And impacted by these 2 CSS declarations:
fieldset input[type=text] {
width: 96%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
margin: 0 10px;
}
.standard-size {
width: auto ;
}
According to this link:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
precedence works this way
(Inline Style , ID, Class, Element). A number on the left precedes any number on the right.
In my case:
fieldset input[type=text] translates to (0,0,0,2) because fieldset and input are 2 elements
AND
.standard-size translates to (0,0,1,0) because .standard-size is one CSS class
(0,0,1,0) should take precedence over (0,0,0,2) because the 1 is simply more to the left than the 2 and that makes it more important. So why is the width of 96% taking over?
Thank you
You forgot to count the [type=text] attribute selector, which is equivalent to a class selector (also mentioned in the article you linked to):
fieldset input[type=text] /* 1 attribute, 2 types -> specificity = (0, 0, 1, 2) */
.standard-size /* 1 class -> specificity = (0, 0, 1, 0) */
While an attribute selector and a class selector are equivalent, it's the two type selectors in your first rule that cause it to outweigh the second.
Because [type=text] is an attribute, it adds (0,0,1,0) (source). So your first set of rules actually has specificity (0,0,1,2), which is greater than (0,0,1,0).
So I'm using the following CSS to create a button style;
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
padding: .5em 2em .55em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
That combined with some other classes to add colour and give hovering and press effects works great.
I've applied this style to various html tags across the site;
<span>
<a href>
<button>
<input type="button">
<input type="submit">
All of them look great and work great in Chrome and (amazingly) IE7-9 (less so in IE7-8 but ok).
But in Firefox the input type tags appear almost twice the size of the a href type ones. Whats causing this?
Here is an example.
using of em might cause this behaviour...
Add a line-height attribute.
something like:
line-height:20px;
should do it.
Firefox uses different line-height for different elements. If you check with firebug, the a has a line-height of 14px, while the inputs have a line-height of 17px.
Well, I used a combination of all three suggestions from Pablo Rincon, ThomasK and beanland.
None of them helped in isolation but together they all seem to work!
Added a CSS reset, not all of them worked but found this one; http://github.com/necolas/normalize.css
Changed the em's to px's.
Set line-height on .button to 17px.
Perfect. Cheers.
Is there any way to reproduce the following effect with HTML/CSS:
http://i.imgur.com/ASdXb.png
Basically I want to have my link text 'take priority' and block out some white space around any letters that cross the underline/border-bottom.
It can be done, it looks like a perfect example for a useful LESS mixin. http://jsfiddle.net/elclanrs/r6Rmh/
p {
display: inline-block;
font: bold 24px Arial;
border-bottom: 3px solid black;
text-shadow: -3px 0 white, 3px 0 white;
line-height: 21px;
}