I have a rectangular sprite image that is 120px x 40px. When someone select the image I want the right side of the selected image to turn into an arrow pointing right.
I know how to use border-radius but that gives a curves whereas I want a point.
Using css how would I turn the right side of an image into a arrow?
Thanks
Basically I want to perform a border-radius only on the right side, but instead of curved pointed like an arrow.
.selected {
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}
If you can keep the white background here is a very simple solution:
jsFiddle here
Run the image in the background of the following example.
HTML
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
CSS
.container {
background: #333;
width: 200px;
height: 60px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
.container:hover::after {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
top: -20px;
right: -20px;
z-index: 1;
transform: rotate(45deg);
}
.container:hover::before {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
bottom: -20px;
right: -20px;
z-index: 1;
transform: rotate(-45deg);
}
I do not know, i understood your question, but i think, what you want to achive, can be done by jQuery and css function with background-position
Basically, if you want to use a CSS Sprite image, background-position will indeed do it.
You may want to have a <div> positionned over your image, that will be displayed on hovering (CSS :hover) or click (jQuery click event) the image, depending on what you meant by "selecting" it.
Here is an example for hovering case (pure CSS) and here is an example for the clicking case (with 3 lines of jQuery).
Related
This is driving me insane. I've been using the Firefox inspector to try to figure out how this arrow was made (below) on the Headway site.
I've whittled away the code by deleting chunks via the inspector, and got it down to this:
No matter where I inspect, I can not find any such shape. No background image, no glyphs, nothing. It hardly even matters at this point, but I'm pulling my hair out trying to figure out how they did this!
Any CSS gurus care to take a look and chime in? For the sake of learning. :)
It's just a rotated square in the form of a ::before pseudo element.
As you can see, the element is a square (same height/width). The element is absolutely positioned with left: 50% and a negative margin-left of -31px (half the width) for horizontal centering. Finally, transform: rotate(-45deg) is used to rotate the square.
Here is the styling used:
.home-testimonial-wrapper:before
.home-cta-area::before, {
display: block;
width: 62px;
height: 62px;
background: #253031;
position: absolute;
top: -15px;
left: 50%;
margin: 0 0 0 -31px;
z-index: 5;
content: "";
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Aside from this, if you're interested in seeing how to make a triangle using CSS, see this answer.
You can make a triangle by playing with borders of a zero width/height div:
.triangleDiv {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #000000 transparent;
}
<div class="triangleDiv"></div>
Just adjust the border-widths to get the size you want. No need for transforms. By adjusting which borders have width, you can 'rotate' the triangle.
The previous answers are good!
Just wanted to add, for design elements like that I always use one of two things.
Pseudo element to create the design feature ( as described above )
Pseudo element containing the design feature as an svg
Hope that helps!
You can do what they've done with rotating the square, but a more common solution is to use the border property:
.example {
position: relative;
}
.example:after {
content: '';
display: block;
position: absolute;
top: 0; /* or wherever */
left: 0; /* or wherever */
border: 10px solid transparent;
border-bottom-color: #000;
}
I was wondering if it is possible to create following shadow in using CSS.I tried adding box-shadow but it adds shadow to box not something like in the following image. I also tried it using pseudo elements but didn't find any way to make it elliptical. I want to know if this is possible using CSS or I just have to use transparent image for shadow.
Here is something I just made that resembles the shadow part. You need to add rules for other browsers if you want to make it work on non-webkit. The basic idea is to use border-radius to create a circle, then shrink it in y-direction using scale and finally blur it.
http://jsfiddle.net/L4QDs/1/
#shadow {
border-radius: 50%;
width: 100px;
height: 100px;
background: black;
opacity: 0.5;
-webkit-filter: blur(10px);
-webkit-transform: scale(1, 0.2);
}
You can create it with a pseudo element
CSS
#base {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
position: relative;
}
#base:after {
content: '';
position: absolute;
bottom: 0%;
left: 5%;
width: 90%;
height: 8%;
border-radius: 50%;
box-shadow: 0px 10px 5px black;
}
fiddle
My Fiddle
http://jsfiddle.net/yjw46/2/
My Goal
I have this beautiful wheel of colors as a PNG. (I also have it as an SVG). When one of the colors is clicked, I want the WHOLE circle to change to that color. For example, if red is clicked, I want the whole wheel to turn red instead of colorful.
How I Intended to do it
I wanted to have a transparent (in the Fiddle it's semi-transparent, for debugging purposes) div in the shape of a circle (using border-radius) that will be DIRECTLY ON my color-wheel-image. When a color is pressed, I planned for the div to stop being tranparent, and (in a beautiful transition) turn to that color, making it look like the whole wheel has changed color.
Problem
I cannot get the div to cover the image.
So
I'd be glad to hear either why my technique didn't work, or a better technique, if you have one.
You was very close, simply chanage position: relative; to position: absolute; (on the div you want to have over the image) to fix the problem.
Now remember we need to have the parent as position: relative; or the absolute positioned div will not sit in the parent. You have already set this so its good to go.
Find more on position: absolute; here.
Demo here
#circleCover {
width: 300px;
height: 300px;
position: absolute;
top: 0px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here is a little demo to show what will happen without the relative position being set on the parent with the child having absolute.
Demo Without Relative
So you can see that the child is not staying within the parent.
And here is the parent with relative position.
Demo With Relative
As here the child does stay within the parent. This should help you understand why that is needed for the task you are trying to accomplish. Any questions please do just leave a comment and I will get back to you.
<div id="circleWrap">
<img src="http://y.emuze.co/circle.png" id="colorCircle"/>
<div id="circleCover" >
</div>
</div>
I have kept Your div one above the other
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
top:0px;
}
#circleWrap {
position: relative;
top: 0px;
width: 300px;
height: 300px;
margin: 0 auto;
}
#circleCover {
width: 300px;
height: 300px;
position: relative;
top: -302px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here it is in action: http://jsfiddle.net/yjw46/7/
Change your CSS slightly.
#circleCover {
top:-304px;
}
Fiddle
Just add position:absolute in #colorCircle
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
position:absolute;
}
I've used CSS border arrows quite regularly, but I don't know if what I want to achieve is possible with them, so I went another route and used pseudo elements instead. I know my solution relies on trigonometry but still don't know how to emplement it.
I need , regardless of the height of my .front div, to be able to maintain the 7PX width, thus, allowing for a flexible height with a fixed width:
.front{
height: 20px;
**width: 7px;**
background-color: darkred;
position: relative;
}
and that implies changing the transform angle in a mathematically controlled way:
.front:after{
content: " ";
height: 30px;
width: 15px;
background-color: lightgreen;
position: absolute;
top:0;
left: 0;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
Is there a simpler way to achieve this? Images are obviously out of the question, because pixellation...
JsFiddle here.
Here's your fiddle with a triangle in the top right corner made purely of CSS. I'm sure that animating it is just a matter of resizing the two border widths.
#top_rt_tri {
position:absolute; top:0px;right:0px;width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 60px 60px;
border-color: transparent transparent #007bff transparent;}
I'm trying to make a background image be outside a div and can't figure out how to do this (if even it's possible). My HTML:
<div id="test"></div>
My CSS:
#test {
width: 50px;
height:50px;
background: 0 50px url('https://developers.google.com/_static/images/developers-logo.svg') blue;
}
A stand-alone demo:
http://jsfiddle.net/568Zy/
The demo shows the image within the 50x50 div. What I was hoping for was to have the background image start at 0px from the top and 50px from the left.
Any ideas?
Your question does not make it clear exactly what you want the end result to look like.
It is not possible to make a background image 'overflow' it's element, however you can apply the background image to a pseudo element and make that whatever size you want and position it wherever you want.
I have used this technique on your example: http://jsfiddle.net/ybw750jd/
#test {
background: blue;
height:50px;
position: relative;
width: 50px;
}
#test:before {
background: url("https://picsum.photos/450/100") repeat scroll 0 0 transparent;
content: " ";
display: block;
height: 100px;
position: absolute;
width: 450px;
z-index: -1;
}
If this is not the effect you want, please rephrase your question and consider making a mock up image showing what you want it to look like.
Try this: http://jsfiddle.net/568Zy/16/. Essentially, you're creating two <div> elements, and set one to be absolute with a z-index: 0; on one and z-index: 1; on the other.
<div id="test">zzz</div>
<div class="z-index"></div>
#test {
background: blue;
width: 50px;
height:50px;
position: relative;
z-index: 1;
}
.z-index {
position: absolute;
background: url('https://developers.google.com/_static/images/developers-logo.svg');
z-index: 0;
width: 300px;
height: 100px;
top: 0px;
left: 50px;
}