This question already has answers here:
CSS Font Border?
(12 answers)
Closed 6 years ago.
I know in all cases that the border attribute in CSS covers, of course the borders of the HTML attributes. But my main question is:
For a border like this:
.blah-border {
border: #333 outset 5px;
}
be turned into embossed lettering?
Is there a way to make embossed lettering instead of the use of text-shadow? Or if it is by use of tex-t shadow, how can it be wrapped on all sides of the letter?
shade and shine bordering
{edited: What I meant was, instead of web-kit (after testing) didn't show the accurate result. When trying the Web-kit shadow tool, was a bit disapointed that it completely doesnt cover the letters like it normally do with cornered "outset" and "inset" bordering styles from CSS. What kind of CSS scripting that allows the border to cover all the parameter of the letter (like an offset) with shadows and shined areas as described by the picture.}
It sounds like you want text-shadow:
text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
color: [background color of the container]
Basically you set a 1px shadow offset up and left one pixel, and then another offset down and right one pixel, with a colors that give you an inset or outset effect. This doesn't work so well on a textured background as the text itself needs to be the same color as the background (transaprent lets the shadows show through).
CodePen demo
you need understand this I recommend this page web for you can study more about it and I leave 1 example of this:
web page
here is the example:
.back {
background-color: black;
}
.enjoy-css {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
border: none;
font: normal 72px/normal "Passero One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: -3px -5px 0 rgb(170,170,170) , -3px -4px 0 rgb(185,185,185) , -3px -3px 0 rgb(187,187,187) , -3px -2px 0 rgb(201,201,201) , -3px -1px 0 rgb(204,204,204) , 3px 1px 0 rgb(204,204,204) , 3px 2px 0 rgb(201,201,201) , 3px 3px 0 rgb(187,187,187) , 3px 4px 0 rgb(185,185,185) , 3px 5px 0 rgb(170,170,170) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.enjoy-css:hover {
color: rgba(169,214,169,1);
text-shadow: -3px -5px 0 rgba(255,255,255,1) , -1px -3px 0 rgba(255,255,255,1) , -2px -3px 0 rgba(255,255,255,1) , -3px -2px 0 rgba(255,255,255,1) , -3px -1px 0 rgba(255,255,255,1) , 3px 1px 0 rgba(255,255,255,1) , 3px 2px 0 rgba(255,255,255,1) , 3px 3px 0 rgba(255,255,255,1) , 3px 4px 0 rgba(255,255,255,1) , 3px 5px 0 rgba(255,255,255,1) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
<body class="back">
<div class="enjoy-css">3D effect</div>
<link async href="http://fonts.googleapis.com/css?family=Passero%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
</body>
/
Related
I want to add transition animations to a border
I am using SCSS :
display: flex;
&:hover{
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
transition: border 1s ease;
}
This code didn't work , I need a way to add the transitions but I don't know how !
The browser doesn't know how to change from a colour that isn't set, so you simply need a colour to transition from. In this case I've used transparent:
div {
border: transparent;
&:hover{
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
transition: border 1s ease;
}
}
I know this may be a dupe, but I'm willing to take the hit as I feel confident I have researched multiple solutions.
I have tried many methods to get This box-shadow transition to work, including:
Switching between hex, rgb, and rgba colors in the box-shadow declaration.
Using selectors with more specificity.
Changing the the transition property to include ease-in-out at the end of the declaration.
I cleansed the CSS file of any transition properties that could possibly effect the element.
All the while, triple checking my spelling mistakes.
The inspector says my styles are not being overridden. Here is my code:
.site-header .genesis-nav-menu .menu-item a {
-webkit-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
-moz-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
-o-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
box-shadow: 3px 3px 14px rgb(0,0,0) inset;
-webkit-transition: box-shadow 3s;
-moz-transition: box-shadow 3s;
-o-transition: box-shadow 3s;
transition: box-shadow 3s;
}
.site-header .genesis-nav-menu .menu-item a:hover{
-webkit-box-shadow: 3px 3px 14px rgb(0,0,0);
-moz-box-shadow: 3px 3px 14px rgb(0,0,0);
-o-box-shadow: 3px 3px 14px rgb(0,0,0);
box-shadow: 3px 3px 14px rgb(0,0,0);
}
What could be happening here to cause this to do nothing?
Here is a link to my site for an in context experience. It's the header menu in the top right corner of the page.
Try:
.site-header .genesis-nav-menu .menu-item a {
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0), 3px 3px 14px rgb(0,0,0) inset;
transition: box-shadow 3s;
}
.site-header .genesis-nav-menu .menu-item a:hover {
box-shadow: 3px 3px 14px rgb(0,0,0), 0 0 0 rgba(0,0,0, 0) inset;
}
Use transition: all; instead of box-shadow, should fix your issue
I'm trying to add image to my text box
here is the code
<form id="findPromo">
<input type="text" name="find" placeholder="I'm Looking For...">
<input type="button" value="Search">
</form>
css
#findPromo input[type="text"] {
background: url(image/find.png) no-repeat 10px 6px #444;
background: #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#findPromo input[type="text"]:focus {
background: url(image/find.png) no-repeat 10px 6px #444;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
but the image does not come out
anyone know how to do it?
thanks
It is because you are overriding the background prorepty with background: #444; if you remove that line, the image is displayed :
DEMO
In the first CSS ruleset, you first set the background to your image but then overwrite it with the background: #444 rule. You don’t just overwrite the background color, but the whole background statement.
Since you already have the #444 in the first statement, you can safely remove the second one.
Ok, I have the following code: https://jsfiddle.net/7u1aLxaw/
So the issue is that when you hover over an image, it shows an overlay with a name specific to that image. But if the name is longer than the image width, the image immediately to the right is pushed away and the overlay isn't centered on the image. It expands just to the right, not on both sides.
I can't work out how to center the overlay and avoid it effecting divs on either side of it.
*I tried using display: none, but I want to preserve the CSS3 transitions. Using display: none to completely remove the element removes the CSS3 transition.
Any ideas?
Change your .item_overlay style to:
.item_overlay {
height: auto;
width: auto;
margin: 0 auto;
margin-top: -95px;
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Making the position absolute ignores the other elements position, then setting a negative top margin moves it back to the top. http://jsfiddle.net/q8SER/2/
Working jsFiddle: http://jsfiddle.net/q8SER/3/
I had to change a whole bunch of stuff to make it work.
First of all, I changed the HTML structure and placed the overlay div before the icon div.
Here is the new overlay CSS:
.item_overlay {
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Now, because the inner div (overlay) overflows the parent div, I couldn't center it conventionally with auto margins, so I implemented a jQuery solution.
JS code:
$(".item_overlay").each( function() {
var offset = ($(this).parent().width() - $(this).width()) / 2;
$(this).css("left", offset + "px");
});
Hope that helps.
The forms in bootstrap have a box shadow that leaves a very light shadow on the right side of the form. I need to remove that shadow on the right only so that the icon looks apart of the form.
JSFiddle: http://jsfiddle.net/MgcDU/6296/
Here's the CSS:
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
HTML:
<a href="#">
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search..." style="border-right:0;">
<span class="add-on" style="background:white;border-left:0;"><i class="icon-search" style="color:#a3a3a3"></i></span>
</div>
</a>
Please help!
Here's how I fixed it: http://jsfiddle.net/MgcDU/6305/
CSS:
.input-append {
position: relative;
}
.input-append .add-on {
padding: 4px 8px;
background: white;
border-left: 0;
position: absolute;
right: -32px;
}
You can relatively position .add-on and give it a positive z-index value so that it appears over the right-edge of the <input> - it's not 100% seamless but with some minor changes you can probably make it work for you.
.input-append .add-on:last-child {
position: relative;
z-index: 5;
}
http://jsfiddle.net/MgcDU/6302/
Assign a spread-radius value of -1px to the box shadow and add an extra pixel to the y-offset.
<spread-radius>
This is a fourth <length> value. Positive values will
cause the shadow to expand and grow bigger, negative values will cause
the shadow to shrink. If not specified, it will be 0 (the shadow will
be the same size as the element).
MDN: box-shadow (source)
http://jsfiddle.net/MgcDU/6307/
CSS
input[type="text"] {
-webkit-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
}
Try border-left:0px; becouse now yu dont have a px in element style
The best way is using box-shadow for "DIV.input-append" and make transparent background to input[type=text], example of using:
CSS:
.input-append{
position: relative;
padding: 2px;
width: 200px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.input-append:before {
content: '';
position: absolute;
right: 8px;
width: 16px;
height: 16px;
background: url('https://cdn3.iconfinder.com/data/icons/eightyshades/512/11_Search-16.png') no-repeat;
}
.input-append input[type=text]{
background: none;
border:none;
}
HTML:
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search...">
</div>
Demo: http://jsfiddle.net/EDLs7/