Related
I met a project that set the gradient filter to whole web page.
So I have implemented the filter like this.jsfiddle
HTML
<div class="container">
<button class="tag">Featured</button>
<div id="grad1">
</div>
CSS
#grad1 {
height: 200px;
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 (must be last) */
opacity: 0.5;
}
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position: relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
But the problem is button is not selectable in this case.
I have no sense how to make the button work.
How can I make button selectable and also show gradient above the button?
Finally UI should look like this.
its seems you are looking for pointer-events: none;
Demo http://jsfiddle.net/r6tdc3Lh/5/
a </div> tag is missing.
At the end of ur code.
Ur container isnt closing, so your button cant‘t be clicked.
Try to add just another closing tag.
Check the fiddle. You have two issue 1. set button attribute type="button" and 2. .tag z-index should be 1. Because your button is absolute position.
UPDATE
I Update the fiddle. I think it will help you.
How do I get A similar style to the below active div? It seems that the color is kind of fading.
You can use linear-gradient for that, as it is described here. You can do the following:
.hoverable:hover {
background: -webkit-linear-gradient(white, lightgray);
background: -moz-linear-gradient(white, lightgray);
background: -o-linear-gradient(white, lightgray);
background: linear-gradient(white, lightgray);
}
You can check a demo on this Fiddle
Try this
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(255,0,0,0), rgba(245,245,245,1)); /* Standard syntax (must be last) */
}
<!DOCTYPE html>
<html>
<body>
<h3>Linear Gradient - Transparency</h3>
<div id="grad1"></div>
</body>
</html>
I'm using this jQuery library to help stream a bunch of logos: SmoothDivScroll
Got it working great and I love it.
But I wanted to add just one more thing. I want a gradient overlay over the scroller so that on each side of the scroller the logos transition from white -> opaque -> white by the time it scrolls to the other side.
Something similar to this site: http://creativehero.es/
I got it working with the following code EXCEPT it kills my hyperlinks for each logo. I've tried messing around with pointer-events/z-index and I just can't get the overlay on top of the scroller and also have the logos in the scroller clickable. It's also always the same behavior across all modern browsers. Here's the CSS:
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
z-index:-1;
pointer-events: visible;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
pointer-events: visible;
}
#logoParade
{
width: auto;
height: 80px;
position: relative;
pointer-events: visible;
}
#logoParade a
{
display: block;
float: left;
margin-left: 15px;
margin-right: 15px;
margin-top: 8px;
margin-bottom: 8px;
pointer-events: visible;
z-index:210;
}
#logoParade img
{
height:65px;
width:auto;
pointer-events: visible;
}
#logoParade img:hover {
-ms-transform: scale(1.03,1.03); /* IE 9 */
-webkit-transform: scale(1.03,1.03); /* Chrome, Safari, Opera */
transform: scale(1.03,1.03);
}
.grad {
pointer-events: none;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(255,255,255,1)), color-stop(20%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
}
And here's the html:
<div class="row grad" >
<div id="logoParade">
<div class="scrollWrapper">
<div class="scrollableArea" style="width: 6000px;">
#inherits umbraco.MacroEngines.DynamicNodeContext
#*
Macro Parameters To Create, for this macro to work:
Show:True Alias:mediaId Name:Media Folder ID Type:MediaCurrent
*#
#if (Parameter.mediaId == null)
{
#* Get the media folder as a dynamic node *#
var mediaFolder = Library.MediaById(5093);
if (mediaFolder.Children.Any())
{
#* for each item in children of the selected media folder *#
foreach (var mediaItem in mediaFolder.Children)
{
<img src="#mediaItem.umbracoFile" alt="#mediaItem.Name" />
}
}
}
</div>
</div>
</div>
</div>
I also want to add that adding z-index:-1 to either div element (scrollWrapper or scrollableArea) brings the gradient out in front of the scroller, but that is also the culprit not allowing my anchor tags to be clicked.
I'm trying to achieve a rectangle button with a transparent mask over the bottom right, as per this fiddle:
http://jsfiddle.net/c6gUX/
body {
background: #fff;
padding: 5em;
}
.button {
color: #FFFFFF;
font-family: 'RalewayRegular', Arial,sans-serif;
font-size: 1em;
padding: 0.5em 1.2em 0.5em 0.8em;
position: relative;
text-decoration: none;
}
.button:hover {
background: linear-gradient(to bottom, #FFA13E 0px, #E56204 100%) repeat scroll 0 0 transparent;
color: #FFFFFF;
}
.button:after {
background: url(http://i.imgur.com/8Vvw1Sw.png) no-repeat scroll 0 0 transparent;
bottom: -12px;
content: " ";
height: 38px;
position: absolute;
right: -12px;
width: 36px;
z-index: 99;
}
.orange-grad {
background: #ffa13e; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYTEzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjc4MDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3ODA1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #ffa13e 0%, #ff7805 100%, #ff7805 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa13e), color-stop(100%,#ff7805), color-stop(100%,#ff7805)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa13e', endColorstr='#ff7805',GradientType=0 ); /* IE6-8 */
}
As you can see, i've achieved it with a quite hacky way. I've untested this cross-browser and suspect IE to mess it up without a shim for :after, etc.
How can I achieve this cross-browser modern? How can I make it work when overlayed onto an image so it's effectively transparent? (See below image)
From PSD:
My fiddle on an image:
Logically I know that IE6/7 will need an image and i'm kinda OK with that.
Word length. Sometimes the button doesn't have 'Read more', so need a 100% width solution.
Edit
I am thinking of using a Sprite. (http://i.imgur.com/z0UYpTX.png)
This is tricky - particularly with your combination of a gradient with the beveled corner. The closest I could get is this fiddle, which makes use of CSS gradients to achieve the effect you're after, based on Lea Verou's awesome article.
The relevant CSS is:
.button {
background: #ffa13e; /* fallback */
background: -webkit-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: -moz-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: -o-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: linear-gradient(315deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
}
That's the only way to get the background image to show through (that I know of). The drawback is that the gradient is not your linear one from top to bottom, but at an angle. I don't think it's possible to combine multiple gradients to match your visual precisely. But it is pretty close:
I'd suggest that this is the perfect candidate for progressive enhancement - older IE will get a solid background colour but that's perfectly acceptable (i.e. I wouldn't personally bother trying for an image fallback).
Note: there have been numerous changes between the Working Draft and the Candidate Recommendation for the gradient syntax, one of which is the angle of the gradient:
From the IE Blog. Hence the unprefixed version requires a different deg value.
Make use of it..... I think this will help You.. use it with ur image.. this will solve cross-browser issue...
http://jsfiddle.net/Praveen16oct90/2bZAW/1095/
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 40px solid white;
border-top: 40px solid red;
width: 20;
}
I'm wondering if there's an easier way to create circular divs than what I'm doing now.
Currently, I am just making an image for each different size, but it's annoying to do this.
Is there anyway using CSS to make divs which are circular and I can specify the radius?
Here's a demo: http://jsfiddle.net/thirtydot/JJytE/1170/
CSS:
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
HTML:
<div class="circleBase type1"></div>
<div class="circleBase type2"></div><div class="circleBase type2"></div>
<div class="circleBase type3"></div>
To make this work in IE8 and older, you must download and use CSS3 PIE. My demo above won't work in IE8, but that's only because jsFiddle doesn't host PIE.htc.
My demo looks like this:
Setting the border-radius of each side of an element to 50% will create the circle display at any size:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
Try this
.iphonebadge {
border-radius:99px;
-moz-border-radius:99px;
-webkit-border-radius:99px;
background:red;
color:#fff;
border:3px #fff solid;
background-color: #e7676d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
background-image: linear-gradient(top, #e7676d, #b7070a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a');
-webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
-moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
display:inline-block;
padding:2px 2px 2px 2px ;
margin:3px;
font-family:arial;
font-weight:bold;
}
It is actually possible.
See: CSS Tip: How to Make Circles Without Images. See demo.
But be warned, It has serious disadvantages in terms of compatibility basically, you are making a cat bark.
See it working here
As you will see you just have to set up the height and width to half the border-radius
Good luck!
I have 4 solution to finish this task:
border-radius
clip-path
pseudo elements
radial-gradient
#circle1 {
background-color: #B90136;
width: 100px;
height: 100px;
border-radius: 50px;/* specify the radius */
}
#circle2 {
background-color: #B90136;
width: 100px;/* specify the radius */
height: 100px;/* specify the radius */
clip-path: circle();
}
#circle3::before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50px;/* specify the radius */
background-color: #B90136;
}
#circle4 {
background-image: radial-gradient(#B90136 70%, transparent 30%);
height: 100px;/* specify the radius */
width: 100px;/* specify the radius */
}
<h3>1 border-radius</h3>
<div id="circle1"></div>
<hr/>
<h3>2 clip-path</h3>
<div id="circle2"></div>
<hr/>
<h3>3 pseudo element</h3>
<div id="circle3"></div>
<hr/>
<h3>4 radial-gradient</h3>
<div id="circle4"></div>
Let's say you have this image:
to make a circle out of this you only need to add
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}
So if you have a div you can do the same thing.
Check the example below:
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
animation: stackoverflow-example infinite 20s linear;
pointer-events: none;
}
#keyframes stackoverflow-example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div>
<img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>
There's also [the bad idea of] using several (20+) horizontal or vertical 1px divs to construct a circle. This jQuery plugin uses this method to construct different shapes.
Give width and height depending on the size but,keep both equal
.circle {
background-color: gray;
height: 400px;
width: 400px;
border-radius: 100%;
}
<div class="circle">
</div>
.fa-circle{
color: tomato;
}
div{
font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
Just wanted to mention another solution which answers the question of "Easier way to create circle div than using an image?" which is to use FontAwesome.
You import the fontawesome css file or from the CDN here
and then you just:
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
and you can give it any color you want any font size.
You can try the radial-gradient CSS function:
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
Apply it to a div layer:
<div class="circle"></div>
.circle {
height: 20rem;
width: 20rem;
border-radius: 50%;
background-color: #EF6A6A;
}
<div class="circle"></div>
You can use radius but it will not work on IE: border-radius: 5px 5px;.
basically this uses div's position absolute to place a character at the given coordinates. so using the parametric equation for a circle, you can draw a circle. if you were to change div's position to relative, it'll result in a sine wave...
in essence we are graphing equations by abusing the position property. i'm not versed well in css, so someone can surely make this more elegant. enjoy.
this works on all browsers and mobile devices (that i'm aware of). i use it on my own website to draw sine waves of text (www.cpixel.com). the original source of this code is found here: www.mathopenref.com/coordcirclealgorithm.html
<html>
<head></head>
<body>
<script language="Javascript">
var x_center = 50; //0 in both x_center and y_center will place the center
var y_center = 50; // at the top left of the browser
var resolution_step = 360; //how many times to stop along the circle to plot your character.
var radius = 50; //how big ya want your circle?
var plot_character = "·"; //could use any character here, try letters/words for cool effects
var div_top_offset=10;
var div_left_offset=10;
var x,y;
for ( var angle_theta = 0; angle_theta < 2 * Math.PI; angle_theta += 2 * Math.PI/resolution_step ){
x = x_center + radius * Math.cos(angle_theta);
y = y_center - radius * Math.sin(angle_theta);
document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
}
</script>
</body>
</html>
Adding the css property of:
border-radius: 50%;
to any div makes it circular.
For circle, create a div element and then enter width = 2 times of the border radius = 2 times padding. Also line-height = 0
For example, with 50px as radii of the circle, the below code works well:
width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;