How can I reflect contents downwards [duplicate] - html

Is there similar property to -webkit-box-reflect for the mozilla and other browsers? I could not find on google which other browsers have support for this. So if someone can tell me or give me link, that would be really nice.

This is possible with not only webkit (latest chrome or safari) but also in latest firefox.
Here is the example: http://codepen.io/jonathan/pen/pgioE
HTML:
<div id="someid">
<img src="image url" />
<div/>
CSS (webkit):
#someid {
/* need some space for the reflection */
margin-bottom: 120px;
/* the gradient makes the reflection fade out */
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
}
CSS (Firefox - Gecko):
#someid {
position: relative;
/* need some space for the reflection */
margin-bottom: 120px;
}
#someid:before {
content:""; /* needed or nothing will be shown */
background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat;
-moz-transform: scaleY(-1); /* flip the image vertically */
position:relative;
height:140px;
width: 360px; /* should be > image width + margin + shadow */
top: 247px;
left:0px;
}
Firefox uses -moz-element to do the reflections (https://developer.mozilla.org/en-US/docs/CSS/element), whereas webkit uses a proprietary vendor prefix for reflections.
I hope this helps!

The -webkit-box-reflect property is only supported by webkit browsers, namely Chrome and Safari. As it is a proprietary webkit property, there is no equivalent for other browsers.
The alternative would be to use javascript to create a mirror element with faded opacity.

Related

Border Image Gradient Not Working in IE10?

I have some rules for my div "Border" It works in all other browsers but not in IE 10.
Anybody have any idea why this could be happening?
Thank you.
.border {
background: white;
border: 8px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, white 50%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, white 50%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, white 50%, #3a4ed5 100%);
border-image-slice: 1;
}
.border {
background-color: white;
display: block;
height: 50px;
width: 150px;
text-align: center;
transform: skewX(-15deg);
}
<div class="border">
<div>
You said that you have the meta tag set to emulate IE10.
Border images are not supported by IE10, only IE11. (You can confirm here: http://caniuse.com/border-image/embed/.)
So if you set IE11 to emulate IE10, it will stop supporting border images.
To resolve the problem, you need to remove the IE10 emulation. The best thing to do here is to explicitly tell IE to use it's best available mode. This can be done as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Simply swap out your existing meta tag for this one, and the border image problem will be solved.
However, before you make that change you should check to confirm if there is any other reason why your site might have wanted to be in IE10 mode. I'm guessing there isn't any reason, but it's worth checking.

how to do a transparency gradient on an element in css?

Is there any possible way or workaround that I can fade an element from 100% to 0% opacity top to bottom? Similar to a linear gradient background, but transparency on the element itself (not the background color).
The idea is that on the hover state, it would brighten up, and when clicked, move up to the spot of the active popup
There are alot of online css generators why don't you use that.
Here is a help link for you, go there and generate your desired Gradient.
http://www.colorzilla.com/gradient-editor/
ok, I see two different types of transparency, the first one is a alpha css just like that:
div {
opacity: 0.5;
filter: alpha(opacity=50);
}
this style made transparent the entired div (Custom sharing dialogue) and the other css that creates a linear gradient style on the button of the page:
#bottom_fade { z-index: 99;
position: fixed;
bottom: 0%;
background-image: url("bottom-fade.png");
/*in your case use a grey image with transparency*/
}
or you can use a div that covers all the button of your pages and add a linear-gradient:
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}
hopefully this snippets helps you, regards.

CSS apply gradient to right triangle shape with solid fill

I want to apply the same gradient to the triangle (class="triangle-right") as the rectangle (class="fillblue"). I have seen some other examples but they are not working for me. Combining both shapes and using a single class would be awesome too!
JS FIDDLE HERE!
CSS:
.fillblue {
background: rgb(208,228,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7',
endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */
height: 40px;
width: 100px;
display: inline-block;
float: left;
color: white;
text-align: center;
line-height: 40px;
font-weight: bold;
}
.triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 40px solid lightblue;
border-bottom: 20px solid transparent;
float: left;
}
HTML:
<div class="fillblue">Step 1</div><div class="triangle-right"></div>
Part 1: Giving the triangle a gradient
The easiest way to achieve this would be to invert your triangle. and extend the length of the element with the gradient.
JSFiddle demo.
Inverting the triangle
Rather than giving the border-left on the triangle a solid colour, you want to give the top and bototm borders the colour (in this case we want to match the background colour, so lets make these white as that's the JSFiddle background colour):
.triangle-right {
...
border-top: 20px solid white;
border-left: 40px solid transparent;
border-bottom: 20px solid white;
}
If you're unsure what this achieves, here is an example of the triangle when the top and bottom borders are set to red instead of white:
Increasing the width of your gradient element
As your triangle is 40px wide, we need to increase the width of our gradient element by 40px. For this I've used padding to ensure the text remains in the same place:
.fillblue {
...
padding-right: 40px;
}
With the same red triangle we used above, this is what it now looks like:
Positioning the inverted triangle on top of our gradient element
Now we simply need to set a negative margin on our inverted triangle to make it appear on top of our gradient element:
.triangle-right {
...
margin-left: -40px;
}
Finally, using the red triangle again, our finished result looks like this:
Part 2: Combining both shapes into one element
To do this we can make use of the :after pseudo-element.
JSFiddle demo.
First off, lets modify our HTML:
<div class="fillblue">Step 1</div>
Now lets give our .fillblue element relative positioning. We do this so that we can absolutely position our triangle in the next step:
.fillblue {
...
position: relative;
}
Now we modify our previous .triangle-right styling to use this :after pseudo-element instead:
.fillblue:after {
width: 0;
height: 0;
border-top: 20px solid white;
border-left: 40px solid transparent;
border-bottom: 20px solid white;
}
Finally we give it the new properties to position it correctly and actually make it display:
.fillblue:after {
...
content: '';
position: absolute;
top: 0;
right: 0;
}
I wanted to suggest using border-image: linear-gradient(...); but then I looked up https://developer.mozilla.org/en-US/docs/Web/CSS/border-top and saw that it's not possible to apply a border-image to just 1 of the borders, and then make the other borders transparent. There's also no border-left-image, so that won't work either. Since border-image is a relatively new addition to CSS (it's part of CSS3), it's not integrated in CSS as well as the other border styles. That's why doing this with borders is not possible. (It looks like this (simple webkit-only demo) if you do try to add a border-image, and then try to override it with transparent borders - it doesn't work)
Assuming you want to keep using borders to create your triangle, I would say this is not possible.
The only way you could make it work then is by changing the div to a square that's got a diagonal gradient, and is rotated 45 degrees via CSS transforms. That would end up being something like this:
.triangle-right {
display:inline-block;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */
/* etc. */
width:28px; /* ~ sqrt(2*40^2)/2 */
height:28px;
-webkit-transform: rotate(45deg);
/* etc. */
margin-top:6px;
margin-left:-14px;
}
Demo
Keep in mind that that is probably not the best solution, since it'd rely purely on transforms, which are not supported in every browser, and there are no good fallbacks for it. It does have one advantage over James Donnely's solution, which is that it keeps its soft borders instead of becoming jagged.
It does have other significant downsides though, namely that you're relying on fixing its position with transform and margin. It is possible other browsers don't handle this exactly the same as Chrome does, and therefore show your triangle differently. They should all show it the same way, but there's always a chance some browser decides to do things slightly differently.
Explanation of the code: The /* etc. */ stands for the other browser prefixes, the width and height are 28px because that's the height of the rotated square, its diagonal length (sqrt(width^2 + height^2)). This is also the reason the margin-left needs to be -14px (half of this diagonal length): it needs to move 14 pixels to the left, so that its corner is moved over the .fillblue element.
As was asked below in the comments, it is also possible to scale the triangle to be wider (or slimmer). This can be done by simply changing the transformation to scale(2, 1) rotate(45deg) so that it applies the stretching and rotating in the right order. A demo of this can be found at http://jsfiddle.net/x61Lyar0/2/.
PS: If you want your arrow to be less pointy, you can apply border-radius: 0 2px 0 0; (or border-top-right-radius: 2px) to smooth it out just a little bit.

nav not working properly in ie8 - no background colour + sub menus dont have inline style

Relatively new to CSS and html5, I have used this tutorial to create a simple pure CSS/html5 drop down menu. In IE8 it does not work properly unfortunately.
I have used the HTML shiv and given all the html5 elements a display:block style in my stylesheet.
The dropdown works and onhover colors appear for submenus in ie8 but the is no background color and the submenus don't position properly or appear as inline style even though I specified this in the CSS.
nav ul li{
display: inline-table; <-- being ignored
float:left; <-- being ignored
}
and for the background color for the list (used colorzilla to generate gradient code below)
nav ul {
background: rgb(87,179,229); Old browsers - doesn't work
background: -moz-linear-gradient(top, rgba(87,179,229,1) 0%, rgba(29,81,145,1) 50%, rgba(15,52,96,1) 51%, rgba(18,61,114,1) 74%, rgba(89,122,165,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,179,229,1)), color-stop(50%,rgba(29,81,145,1)), color-stop(51%,rgba(15,52,96,1)), color-stop(74%,rgba(18,61,114,1)), color-stop(100%,rgba(89,122,165,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* W3C */filter:
/* To try and make it work in IE6-9 */
progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b3e5', endColorstr='#597aa5',GradientType=0 ); /* To try and make it work in IE6-9 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b3e5', endColorstr='#597aa5',GradientType=0 ); /* To try and make it work in IE6-9 */
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table; <-- Not ignored in ie8
}
Does anyone have any ideas how I could make it work in IE8? I read that ie8 doesn't allow child elements to inherit styles in the nav/list hierarchy, but surely if I explicitly specify styles, they should work anyway? Is it that ie8 still doesn't recognise the nav/ul tags properly?
All help much appreciated.
Your HTML5 shim is working, since it's respecting the declaration in nav ul, which means something else is wrong.
Is there any particular reason you're using inline-table for the li elements? It might be worth trying display: block for the lis and see if that works for the same effect you're trying to achieve. Alternatively, you may be able to change it to display: table-cell and remove the float.
Also, it might be worth looking at the page in IE9 for the developer tools. You can set it to "IE8 mode", which will give you a pretty accurate approximation of IE8, plus the ability to see what IE sees (I've found some differences, but not enough to overcome the usefulness of IE9's developer tools). It's possible something else is overriding your setting (such as a more specific declaration in an IE-only stylesheet).
On a side note, display: inline-table (or most of the display properties other than block and inline) doesn't work in IE7. Just a head's up in case you need to support IE7.
add this js code in your page
it defines html5 elements in ie
(function(){if(!/*#cc_on!#*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

Rounded corner in IE8, part of div overflowing to other div not visible

I am trying to create some div (that should be buttons) that have rounded corner. I can get that to work using border-radius.htc or PIE.htc.
I position them using margin-top. The part of the button that flows over to the other div below is not visible, which it should be. Check screenshot:
.menu_buttons{
margin-top:45px;
overflow: visible;
margin-left: 10px;
width: 85px;
height: 3em;
vertical-align: middle;
float:left;
cursor: pointer;
text-align: center;
font: 0.9em Arial, Helvetica, sans-serif;
border-radius: 10px;
behavior: url(PIE.htc);
}
.diagonal:
.diagonal{
background-image: linear-gradient(left top, #CFD993 30%, #8DA900 68%);
background-image: linear-gradient(-45deg, #CFD993 30%, #8DA900 68%);
background-image: -o-linear-gradient(left top, #CFD993 30%, #8DA900 68%);
background-image: -moz-linear-gradient(-45deg left top, #CFD993 30%, #8DA900 68%);
background-image: -webkit-linear-gradient(135deg, #CFD993 30%, #8DA900 68%);
background-image: -ms-linear-gradient(left top, #CFD993 30%, #8DA900 68%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CFD993', endColorstr='#8DA900', GradientType=1);
/*background: #CFD993;*/
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.3, #CFD993),
color-stop(0.68, #8DA900)
);
}
Part of my html:
<div class="diagonal" id="section1">
<img alt="SMIC Service Management In the Cloud" src="/images/smic_small.png" id="smic">
<div class="link_menu">
<button class="menu_buttons ui-corner-all smic_green" id="overview">Overview</button>
<!--Some more <div....-->
<button class="menu_buttons ui-corner-all smic_green" id="usage_benchmark">SMICloud<br>usage<br>benchmark</button>
<a class="menu_items" id="get_smic">Get SMICloud</a>
<!--Some more <a....-->
<a class="menu_items" id="contact">Contact</a>
</div>
</div>
Adding following to .diagonal changes the look according to below screenshot:
position: relative;
z-index: -1;
When trying to add z-index -10 to the div below #section1, nothing happens.
I am totally stuck. How can I do this, creating a div with rounded corner that overflow to another div?
You should separate you definitions, to prevent odd behaviors and save debugging time.
Without the remaining CSS for the elements you've provided, you can see a working example, fully tested across all mentioned browsers, using your definitions for the div.menu_buttons:
See this Working Example!
CSS
.curved {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari and chrome */
-khtml-border-radius:10px; /* Linux browsers */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc) /* Internet Explorer */
}
.menu_buttons {
position:relative;
top: 20px;
margin-left: 10px;
width: 85px;
height: 60px;
float:left;
vertical-align: middle;
cursor: pointer;
text-align: center;
font: 0.9em Arial, Helvetica, sans-serif;
}
EXAMPLE HTML
<div class="menu_buttons curved">.menu_buttons element</div>
Download the border-radius.htc, and check out the CSS curved corner Demos and Page .
TESTED ON
Windows XP Profissional versão 2002 Service Pack 3
Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4
Windows 7 Home Edition Service Pack 1
Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
Firefox 12.0
Chromium 18.0.1025.151 (Developer Build 130497 Linux)
EDITED
Related to OPs comment regarding the mandatory appliance of CSS position.
Working example for the div with rounded corners with no position set!
EDITED
The Final Fix after some chatting was the proper declaration of CSS position for the elements wrapper and the elements then selves.
The Fiddle Example with the correct CSS declarations!