I'm trying to set a fill color of #333 for the arrow on webshim's HTML5 form validation bubble, but I can't seem to identify the correct class.
My CSS so far:
.ws-po-box {
padding: 10px;
/* border: 1px solid red; */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #333;
-webkit-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #fff;
letter-spacing: 0.1pt;
}
.ws-po-arrow {
/* border-bottom: .61538em solid red; */
}
Fiddle: http://jsfiddle.net/zhwdbhdd/.
Any help would be appreciated!
Looks like arrow CSS is contained in ws-po-arrowbox class.
<div class="ws-po-arrow">
<div class="ws-po-arrowbox"></div>
</div>
Arrows color is not a background-color, but a border color, since the arrow is made with borders. So add this CSS
.ws-po-arrowbox{
border-bottom-color:red!important;
}
I updated your fiddle to demonstrate:
http://jsfiddle.net/zhwdbhdd/1/
Related
Like the title says, how do I go about adding hover to my #extended styles?
I will add a link to my Codepen here: https://codepen.io/UserBrayann/pen/gOvmzwN
SCSS
%box-shared {
box-shadow: 4px 3px 19px 0px rgba(0,0,0,0.3);
border-radius: 5px;
padding: 10px;
}
Here is how to use the hover in the scss while also using #extend.
%box-shared {
box-shadow: 4px 3px 19px 0px rgba(0,0,0,0.3);
border-radius: 5px;
padding: 10px;
&:hover {
background-color: red;
}
}
How can I create inset shadow on text? Here is what I am trying to achieve
I am creating this in Figma, on text I have added both drop shadow and text shadow. It seems that Figma only shows source code for drop shadow. Can I achieve inner shadow as well? Values in Figma are these:
x:0
y:4
blur:4
spread:0
color: #000
percentage:25%
h1 {
font-size: 6rem;
margin-bottom: 1rem;
text-shadow: -1px -1px 7px rgba(0,0,0,.2), -1px -1px 2px rgba(255,255,255,.6);
color: #C92929;
text-align: center;
}
<h1>Lorem ipsum</h1>
In CSS you can experiment with transparency of text color and its shadow.
For example:
h1 {
color: rgba(201, 41, 41, 0.8);
text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
font-size: 6rem;
margin-bottom: 1rem;
text-align: center;
}
<h1>Lorem ipsum</h1>
I think, the main problem is calculate that values of colors, to receive advisable effect.
We make a blurred white text-shadow, and a black text-shadow, while making the color of the text transparent. This can give the illusion that the text-shadow is inset... There is no such property, though.
h1 {
color: transparent;
text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
font-size: 6rem;
margin-bottom: 1rem;
text-align: center;
}
<h1>Lorem ipsum</h1>
You can try with transparency as subject here and the code below:
I know result is not the one you expect, because I did not change your shadow. But this the way I use transparantrency that is important.
h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0px 0px 7px rgba(0,0,0,.2), 0px 0px 2px rgba(255,255,255,.2);
text-align: center;
background: white;
}
span{
background: #C92929;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display:block;
}
<h1><span>Lorem Ipsum</span></h1>
I have the following css:
fieldset ul li input {
width: 96%;
margin: 0;
padding: 6px;
font-size: 13px;
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
-webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}
Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can't see it completely. As you can see is hidden in the half of it:
Either increase the height or the padding.
input {
padding: 10px;
}
Is there any way to add a glow around the div? Look at twitter login and how there is a blue glow around the input box, can that be done for the div?
CSS3 can do that
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
Working JSFiddle.
Here is the complete code to style a div exactly like the twitter login input. The styles for the blue border are the box-shadow and border styles for the selector div[contenteditable]:focus. Live demo here (click).
Markup:
<div contenteditable="true">Username or email</div>
CSS:
div[contenteditable]:focus {
border: 1px solid rgb(86, 180, 239);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
div[contenteditable] {
width: 97%;
max-width: 280px;
margin-right: 10px;
font-family: Arial,sans-serif;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
display: inline-block;
padding: 4px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
line-height: 20px;
}
As shown before, use css: focus, border and box-shadow.
If using IE, make sure <doctype> is specified.
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
jsFiddle example.
Also you will face some problem with Internet Explorer while dealing this issue. IE-9 How ever supports box-shadow but the previous versions don't, Check it out here for making it work in all versions of IE
We are using posts and gets, which out-of-the box appear as links (gets) and buttons (posts). In an effort to provide a pleasant and consistent look to the UI, we have button themed all UI click interactions to look the same using css:
.minimal
{
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font: bold 12px "helvetica neue" , helvetica, arial, sans-serif;
padding: 5px 20px 5px 20px;
text-align: center;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
}
.minimal:hover
{
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
.minimal:active
{
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}
...and used this way:
#Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new {#class = "minimal"})
<input type="submit" class = "minimal" value="submit" />
The problem is with the padding statement in .minimal, it seems that depending on the length of text contained in the ActionLink you will get a longer or shorter button. I would use the 'width' tag but in only has effect on the posts... not on the ActionLinks. Has anyone successfully addressed this issue?
width only works on block elements. Try to add this:
a.minimal {
display: inline-block;
padding: 5px 0;
width: 198px; /* subtract border */
}
and add width to .minimal:
width: 200px;
(or style for links in general and treat the submit button in a special way)
For better cross-browser compatibility you might also need to do some trickery according to this (old) article:
a.minimal {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
padding: 5px 0;
width: 198px; /* subtract border */
}
You need to try what works for your target browsers. I tried the first (simpler) solution and it works on all current browsers and IE7 + IE8.