Is there any way to make effects like the in the images, with just CSS?
It would be sad to lose all precious SEO because of images replacing text.
Brightness around the text
http://i.stack.imgur.com/bISVC.png
Shining text
http://i.stack.imgur.com/T9ojb.jpg
I first thought of shadows and stuff but I can't figure anything out...
Try adding a shadow like this : text-shadow: 0 0 3px #0000FF;
These effects are achieved working with multiple shadows layering colors over a dark background.
Here is an example:
.glow{
font-family: Sans-serif;
font-size: 3rem;
background: black;
color: white;
padding: 80px;
text-shadow:
1px 1px 0px gold,
-3px -0 25px red,
3px 0px 3px white,
0px 0px 15px white,
15px 10px 10px black,
0 0 40px orangered,
0 0 40px orangered,
0 0 60px orangered,
0 0 80px orangered,
0 0 80px orangered,
0 0 100px orangered,
0 0 150px orangered;
}
<h1 class="glow">Glowing CSS only</h1>
Related
I am trying to create a reusable div css class that I can use to highlight quotes in articles I am writing on my campaign website. When debugging in Visual Studio using Chrome (or Firefox) I get the desired result:
As you can see there is a silver border, but padding around it.
My CSS class is:
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: silver;
outline-width: 1px;
outline-offset: -10px;
text-align: center;
}
However, in Internet Explorer no padding on the border occurs. Seems like outline-offset is ignored.
Link to article on my website
How can I get a cross-browser class set up that will produce the desired result?
outline-offset is not supported in Internet Explorer.
You could use a combination of outline and border to achieve the same effect.
Here border is used for the silver line and outline is used for the white space surrounding the element.
body {
background: #fffacf;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: white;
outline-width: 10px;
text-align: center;
border: 1px solid silver;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
Another option is to use box-shadow instead of border or outline. This allows you to have as many "borders" as you like.
body {
background: #e6e6e6;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
text-align: center;
margin: 30px 0;
box-shadow: 0 0 0 1px silver,
0 0 0 10px white;
}
.crazy-border {
margin: 50px 10px;
box-shadow: 0 0 0 2px red,
0 0 0 4px white,
0 0 0 6px orange,
0 0 0 8px white,
0 0 0 10px gold,
0 0 0 12px white,
0 0 0 14px green,
0 0 0 16px white,
0 0 0 18px blue,
0 0 0 20px white,
0 0 0 22px purple;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
<div class="articleQuote crazy-border">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
Try nested divs.
HTML:
<div class="article-quote-outer">
<div class="article-quote-inner">
{text goes here}
</div>
</div>
CSS:
.article-quote-outer {
padding: 12px;
background-color: white;
}
.article-quote-inner {
border: 1px solid silver;
padding: 15px;
}
Example:
JSFIDDLE
If the desired result is no white space surrounding the silver border, delete the line:
outline-offset: -10px;
I add "footerAlarms" value in XML view but in HTML version it does not appear in the browser. So what can I do to see the class footerAlarms in HTML view.
<footer class="footerAlarms">
<Toolbar>
<ToolbarSpacer/>
<Link text="{i18n>readMeOss}" press="openSourceFileDownload" class="sapUiMediumMarginBegin LinkOss"/>
</Toolbar>
</footer>
footer.footerAlarms {
height: 42px !important;
width:calc(100%-32px);
margin:0 16px 0 16px !important;
background: #FFFFFF !important;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.60),
inset 0 -1px 0 0 rgba(115,100,90,0.16);
}
My work around
onAfterRendering : function(){
$("footer").addClass("footerAlarms");
}
CSS
.footerAlarms {
height: 42px !important;
// space is needed for the value inside braces below
width:calc(100% - 32px);
margin:0 16px 0 16px !important;
background: #FFFFFF !important;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.60),
inset 0 -1px 0 0 rgba(115,100,90,0.16);
}
You forgot dot before footer.footerAlarms, so it should be:
.footer.footerAlarms {
height: 42px !important;
width:calc(100%-32px);
margin:0 16px 0 16px !important;
background: #FFFFFF !important;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.60),
inset 0 -1px 0 0 rgba(115,100,90,0.16);
}
Edited 291117 15:27 :
Sorry, so try this:
.footerAlarms {
height: 42px !important;
width:calc(100%-32px);
margin:0 16px 0 16px !important;
background: #FFFFFF !important;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.60),
inset 0 -1px 0 0 rgba(115,100,90,0.16);
}
I want to add a small triangle to the upper-right corner of an input type='text' HTML element, like Excel uses to indicate a comment.
The accepted answer to this question:
How to add triangle in table cell
shows how to do it for a table cell. I naively applied the "note" css class to my input element but it didn't work. Any suggestions for how to achieve this?
Pseudo elements can't be used on input's. You can use the same CSS as described in the linked post (here) but you would have to apply the class to an ancestor.
.note {
position: relative;
display: inline-block;
}
.note:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f00;
}
<div class="note">
<input type="text">
</div>
Given a simple input field
<input type="text" />
and assuming we can't use or rely on a parent element for styling, you may use multiple box-shadow to create a triangle, e.g.
Codepen demo
Result (triangle outside)
Code
input {
padding: 10px;
border: 1px #ccc solid;
margin: 15px;
box-shadow: 0 -12px 0 #fff, 12px 0px 0 #fff,
1px -12px 0 #fff, 2px -11px 0 #fff,
3px -10px 0 #fff, 4px -9px 0 #fff,
5px -8px 0 #fff, 6px -7px 0 #fff,
7px -6px 0 #fff, 8px -5px 0 #fff,
9px -3px 0 #fff, 10px -2px 0 #fff,
11px -1px 0 #fff, 12px 0 0 #fff,
8px -12px 0 #9bc;
}
Of course you can change the size of the triangle playing with the offset(y/x) of the box-shadow.
If you need to place the triangle inside the input you could just add a couple of properties to the code above and use outline and outline-offset instead of the border property to create the illusion of an outer border. All the shadows don't move from their position, just give enough space to the offset in order to wrap them.
Codepen demo
Result (triangle inside)
Code
input {
padding: 0;
border: 0;
outline: 1px #ccc solid;
outline-offset: 15px;
...
}
To mark all text inputs with red corner, you could use
textarea, input[type="text"], input:not([type]) {
background: linear-gradient(225deg, red 5px, white 5px);
}
If you want to mark only required fields, then use required attribute and selector:
[required] { background: linear-gradient(225deg, red 5px, white 5px); }
<input placeholder="optional field">
<input placeholder="mandatory field" required>
I'm playing around with this font in css:
http://www.dafont.com/pix-lite.font
Is it possible to change the the inside color of it using just css?
I'm attaching a picture where I did what I'm looking for manually for reference.
This is what I want to do with css:
http://s9.postimg.org/7jp7b9pa7/Skive_2015_03_06_10_56_09.png
This is the closest I think you will get to having a text border.
http://jsfiddle.net/recwq5bg/
someElement {
text-shadow: 2px 0 0 #f00, -2px 0 0 #f00, 0 2px 0 #f00, 0 -2px 0 #f00, 1px 1px #f00, -1px -1px 0 #f00, 1px -1px 0 #f00, -1px 1px 0 #f00;
}
Hope this helps.
I don't know what happend with that font but it would help you: fiddle
span {
font-size: 30px;
color: red;
text-shadow: 1px 0 0 blue,-1px 0 0 blue, 0 1px 0 blue, 0 -1px 0 blue;
}
And HTML:
<span>Hello</span>
I am trying to get an inside shadow working on an input field in Chrome. Unfortunately, this doesn't really work out so far. You can view a jsfiddle over here: http://jsfiddle.net/XgsPT/2/
My CSS:
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
And this simple HTML:
<input type="text" width="30">
But no shadow appears... (Chrome 24)
Give border to input field and the box-shadow will finally work.
http://jsfiddle.net/Jx8xF/
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
border: 1px solid #aaa;
}
The background color of the input is messing things up. Check out this updated fiddle, with this change to the CSS:
input {
/* ... rest as before ...*/
background-color: transparent;
}
Basically, WebKit doesn't allow us to add box-shadow to form controls with native appearance. We need to remove the nativa appearance.
input {
-webkit-appearance: none;
box-shadow: inset 0 0 10px #000000;
}
Also, some CSS properties such as border and background imply -webkit-appearance:none.
Rather than setting the background to transparent set it to white, or whatever colour you like, you just need to declare it and then it will work as it should