I have the following css in my angular Component
.folders {
border-left: 5px solid #b8744f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
/*START*/
background: -webkit-gradient(
linear,
center top,
center bottom,
from(#327aa4),
color-stop(45%, #2e4b5a),
to(#5cb0dc)
);
/*END*/
background: -moz-linear-gradient(
top,
rgba(50, 123, 165, 0.75),
rgba(46, 75, 90, 0.75) 50%,
rgba(92, 176, 220, 0.75)
);
border: solid 1px #102a3e;
box-shadow: inset 0 0 1px #fff;
display: inline-block;
overflow: visible;
}
The part marked between the comments START and END are not right as per the IDE. It keeps complaining like the following:
Mismatched parameters ([linear | radial] , , [ ,]? [, ]? [, [color-stop() | to() | from()]]*)
-webkit-gradient is not working in angular 12
It keeps pointing to a parameter
Use linear-gradient:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: linear-gradient(
#327aa4,
#2e4b5a 45%,
#5cb0dc
);
}
CSS vendor / browser prefixes like -webkit or -moz are not necessary and makes the code messier and you repeat yourself (DRY). I recommend to use Angular with SCSS. Angular supports it out of the box.
If you want to rotate the gradient (e.g. horizontal) you can add the value 90deg. See the docs and web.
Related
In CSS is there a way to make the border transparent, but the box (inside) with the border the same?
Please see this link:
http://jsfiddle.net/xiiJaMiiE/LfWBn/14/
#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
background:white;
z-index:1;
width:80%;
border:5px #0F0 solid;
}
I would like to know if I can make the green border 0.6 opacity and keep the white inside normal.
Is that possible or would I have to make 2 divs on top each other?
Thanks in advance!
You could just use: border: 5px rgba(0, 255, 0, 0.6) solid;
UPDATED EXAMPLE
#white_box {
position: absolute;
min-width: 90%;
max-width: 90%;
margin: 0 auto;
height: 92%;
top: 0%;
left: 5%;
right: 5%;
background: white;
z-index: 1;
width: 80%;
border: 5px rgba(0, 255, 0, 0.6) solid;
}
Alternatively, you could use outline too; both have different results.
outline: 10px solid rgba(0, 255, 0, 0.6);
EXAMPLE HERE
Here if you want fully transparent than, you can use border-color: transparent-
border: 5px solid transparent;
Try in fiddel
Unfortunately, in Explorer, border-color: transparent is rendered as black.
Or if you you only want partially-transparent border, than you can use rgb with alpha transparency-
border: 5px solid rgba(255, 255, 255, 0.5); // 0.5 means 50% of opacity
The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
Try in fiddle
this answer to add some info only. (3 ways : box-shadow:outset x x x ; or box-shadow: inset x x x; , or background-clip )
if you want opacity on borders and see through background of parent container, and not mixe with the background of the element itself, you can draw the background-color with inset shadow. http://jsfiddle.net/Y78Ap/1/ (increased voluntary border-width and added a gradient to body to have it more 'telling')
html,body {
Background-color:rgba(255,165,0,0.5);
background-image:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.3));
}
#white_box {
position:absolute;
min-width:90%;
max-width:90%;
margin:0 auto;
height:92%;
top:0%;
left:5%;
right:5%;
box-shadow:inset 0 0 0 2000px white;
z-index:1;
width:80%;
border: 15px rgba(0, 255, 0, 0.6) solid;
}
You can as well just draw borders with box-shadow: 0 0 5px rgba(0,255,0,0.6); instead border
The easiest way suppose to be, nowdays, is background-clip : http://css-tricks.com/transparent-borders-with-background-clip/
This question already has answers here:
Two color borders
(12 answers)
Closed 1 year ago.
With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.
On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?
NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:
div.white{
border: 2px solid white;
border: 1px solid grey;
}
But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?
And if I put border-style: double then you know I can't pass two different color for the singe double border.
div.white{
border: double white grey;
}
Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.
Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
padding: 2em;
width: 16em;
height: 16em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: none;
border: 4px solid #fff;
content: "";
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
pointer-events: none;
}
<div class="double-border">
<!-- Content -->
</div>
If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;
/* And so on and so forth, if you want border-ception */
margin: 0 auto;
padding: 3em;
width: 16em;
height: 16em;
position: relative;
}
<div class="double-border">
<!-- Content -->
</div>
I use outline a css 2 property that simply works. Check this out, is simple and even easy to animate:
.double-border {
display: block;
clear: both;
background: red;
border: 5px solid yellow;
outline: 5px solid blue;
transition: 0.7s all ease-in;
height: 50px;
width: 50px;
}
.double-border:hover {
background: yellow;
outline-color: red;
border-color: blue;
}
<div class="double-border"></div>
you can add infinite borders using box-shadow using css3
suppose you want to apply multiple borders on one div then code is like:
div {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3 */
outline: 5px solid hsl(0, 0%, 60%);
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
}
Use of pseudo-element as suggested by Terry has one PRO and one CON:
PRO - great cross-browser compatibility because pseudo-element are supported also on older IE.
CON - it requires to create an extra (even if generated) element, that infact is defined pseudo-element.
Anyway is a great solution.
OTHER SOLUTIONS:
If you can accept compatibility since IE9 (IE8 does not have support for this), you can achieve desired result in other two possible ways:
using outline property combined with border and a single inset box-shadow
using two box-shadow combined with border.
Here a jsFiddle with Terry's modified code that shows, side by side, these other possible solutions. Main specific properties for each one are the following (others are shared in .double-border class):
.left
{
outline: 4px solid #fff;
box-shadow:inset 0 0 0 4px #fff;
}
.right
{
box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}
LESS code:
You asked for possible advantages about using a pre-processor like LESS. I this specific case, utility is not so great, but anyway you could optimize something, declaring colors and border/ouline/shadow with #variable.
Here an example of my CSS code, declared in LESS (changing colors and border-width becomes very quick):
#double-border-size:4px;
#inset-border-color:#fff;
#content-color:#ccc;
.double-border
{
background-color: #content-color;
border: #double-border-size solid #content-color;
padding: 2em;
width: 16em;
height: 16em;
float:left;
margin-right:20px;
text-align:center;
}
.left
{
outline: #double-border-size solid #inset-border-color;
box-shadow:inset 0 0 0 #double-border-size #inset-border-color;
}
.right
{
box-shadow:0 0 0 #double-border-size #inset-border-color, inset 0 0 0 #double-border-size #inset-border-color;
}
You can use outline with outline offset
<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
Maybe use outline property
<div class="borders">
Hello
</div>
.borders{
border: 1px solid grey;
outline: 2px solid white;
}
https://jsfiddle.net/Ivan5646/5eunf13f/
Try below structure for applying two color border,
<div class="white">
<div class="grey">
</div>
</div>
.white
{
border: 2px solid white;
}
.grey
{
border: 1px solid grey;
}
You can use the border and box-shadow properties along with CSS pseudo elements to achieve a triple-border sort of effect. See the example below for an idea of how to create three borders at the bottom of a div:
.triple-border:after {
content: " ";
display: block;
width: 100%;
background: #FFE962;
height: 9px;
padding-bottom: 8px;
border-bottom: 9px solid #A3C662;
box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>
You'll have to play around with the values to get the alignment correct. However, you can also achieve more flexibility, e.g. 4 borders if you put some of the attributes in the proper element rather than the pseudo selector.
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.
I noticed that the buttons on unfuddle.com use a layer of noise, i was just wondering what the purpose of this is, i can't visibly notice the difference, but perhaps this is some cross browser hack?
It seems silly to build such an awesome CSS3 button that uses no images only to still load a noise image anyway.
Here is their CSS that goes with the buttons in question, note the gnoise.png?cbv-1346878364
.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
background-color: #A5C416;
background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #90D900;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
background-color: #7EBD00;
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
background-color: #7EBD00;
border-color: #90D900;
}
gnoise.png goes on top of the background-color (along with the radial gradient) to add some visual complexity to an otherwise flat image. The effect is barely visible on a.gp_button, but you can see it if you zoom in on a screenshot using Photoshop, or use the eyedropper to compare pixel colors. The effect is more visible on the <footer> element, because of its darker background color.
By re-using one image on top of solid colors, they get a variety of colors while avoiding multiple HTTP requests which might slow down page loading.
It's just a guess, but the get parameter (?cbv=1346878364) could be used to ensure that, after an update to the image files, a new image file is actually pulled from the server instead of using a browser-cached version.
My guess is that it could have been there for browsers that don't support CSS3. However when I inspect the button in chrome it is overwritten by another image, which makes me believe that is not the case.
If it is not there for older browsers then chances are it is just a coding error. maybe they used it at some point and forgot to take it out.
But to answer your question. It isn't used for anything because it is been overwritten by this image. And if you are looking to replicate what they are doing then I would just remove it.
background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');
Is it possible to achieve a Fadeout effect with CSS3 Box Shadow?
Here's what I have so far
This only adds inset/inner shadow to the vertical sides but I need to achieve a fade out effect at the top.
-moz-box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
-webkit-box-shadow: inset 5px 0 5px -5px #a4a4a4, inset -5px 0 5px -5px #a4a4a4;
box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
See the image below to see the Expected Results and what I currently have.
I also needed something like that:
Basically it is about giving the outer div a drop-shadow and placing the inner div with position:relativ to the outer div with a gradient from transparent to the needed background color:
http://jsfiddle.net/vBuxt/1/
Here is a codepen example of how I tackled this for a project I worked on recently:
http://codepen.io/byronj/pen/waOxqM
I added a box-shadow to my main content section. I then added a absolute positioned div at the bottom of my content section that contains a CSS gradient with the content background color on one end and a transparent background on the other end as seen below:
.container {
width: 1024px;
margin: 0 auto;
}
.container article {
background-color: #fff;
margin: -6em auto 10em auto;
padding-top: 2em;
width: 100%;
box-shadow: 0px -2px 20px 2px rgba(0, 0, 0, 0.4);
}
/** GRADIENT **/
.bottom-gradient {
position: absolute;
width: 115%;
height: 60%;
z-index: 1;
bottom: -20px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 10%, white 50%, white 100%);
}
To ensure the content is not covered up by the gradient, I set my "p" elements to position:relative with a z-index of 2, as seen below:
p {
padding: 1em 3em;
position: relative;
z-index: 2;
margin: 1em auto;
font-size: 1.3em;
line-height: 1.5em;
}
For Eric's situation, you would inverse this effect by placing the gradient at the top of the element containing the box-shadow.
Hope this helps.
You can not transition CSS3 styles that contain multiple values -:
You CAN transition from say one color to another in CSS3 but you can NOT transition between gradiens in CSS3 as it gets confused with the multiple values, it will be the same with your multiple shadow values also.
Ah, I think I see what you are trying to achieve. A solution maybe would be to try and reproduce the look you are after without using Shadows - A link below shows a possible solution using borders instead of shadows, see what you think. http://css-tricks.com/examples/GradientBorder/