How to ignore transparent place on hover event ? In the first picture i need ignore "THIS PLACE". I need hover on rhombus works only.
<img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first">
#first:hover {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
You can't. You might be able to using an SVG element (not in an <img> tag), but with a normal image the bounding box will always be rectangular, and any box shadows or other styles will be applied to that box instead of the contours of your image.
Instead of using image you can create your own rhombus and then apply hover to it like below
FIDDLE DEMO
<div id='container'>
<div id='diamond'></div>
</div>
CSS
#diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;
position: relative;
top: -100px;
}
#diamond:after {
content:'';
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: red;
}
#diamond:hover {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
#container {
width:200px;
height:200px;
border:3px solid;
}
Hope this is what you were looking for
Demo
css
a {
display:block;
height:165px;
width:165px;
background:transparent;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform: rotate(45deg);
text-align: center;
margin: 37px;
}
.bg {
position: absolute;
background:url('http://s30.postimg.org/xpd6gwla9/1_Copy.jpg');
background-repeat: no-repeat;
height: 300px;
}
html
<div>
<div class="bg">
<div></div>
</div>
</div>
Related
Currently, I am playing with HTML and CSS and I wanted to make a icon from this image
the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle but it did not work. For the shaded part, I used a box-shadow in styling it. There are already too many divs in my sample icon. I just want to have it simple and readable.
Here is my HTML structure:
<link rel="stylesheet" href="style.css">
<div class="cont">
<div class="icon2">
<div class="inner-circle"></div>
</div>
</div>
and here is my CSS:
.cont {
width: 190px;
height: 190px;
padding: 20px;
}
.icon2 {
position: relative;
border: 2px solid #353332;
width: 187px;
height: 184px;
border-radius: 50%;
background-color: #fff;
box-shadow: inset 20px 35px #1CAEE3;
transform: rotate(177deg);
}
.inner-circle {
border: 7px solid #353332;
width: 120px;
height: 183px;
background-color: #fff;
border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
transform: rotate(240deg);
display: block;
margin: 6px 0px 4px 35px;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
Can you explain me this and how can I come up with a solution to my problem? I'm stuck for hours and I just wanted to try it with pure HTML and CSS and not using photoshop.
You can easily do this with one element and radial-gradient. Simply adjust the percentage used inside the gradient to control the shape:
.box {
width:150px;
height:150px;
border-radius:50%;
border:4px solid;
background:
radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px));
}
<div class="box"></div>
You can also use box-shadow ;)
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
demo aside your image:
div {
border: solid 6px;
display: inline-flex;
height: 200px;
width: 200px;
border-radius: 50%;
box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px;
}
code {
font-size: 30px;
color: green;
margin: auto;
font-weight: bold;
}
div,
img {
vertical-align: middle;
}
<img src="https://i.stack.imgur.com/HRpQY.png">
<div><code>box-shadow</code></div>
another example :
div {
float:left;
height: 180px;
width: 180px;
margin: 1em;
box-sizing: border-box;
padding: 25px;
background: #F4E5D9;
box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;text-align:center;
}
div + div {border-radius:4em /50%;
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
you may also draw citrus slices https://codepen.io/gcyrillus/pen/wutEK .
but SVG would be at best here ;)
You could make use of a pseudo element and have an overflow:hidden to hide the rest of the pseudo element's parts that fall outside of the div's 'outer circle'
div {
height: 200px;
width: 200px;
overflow: hidden;
border: 5px solid black;
background:orange;
border-radius: 50%;
position: relative;
}
div:after {
content: "";
position: absolute;
height: 100%;
width: 200%;
border: inherit;
border-radius: 50%;
background: white;
top: -20%;
left: -100%;
}
<div></div>
I had this code to create a double border off different widths, but i need it to only show on the left,top and right sides. This is fine with the border property but not possible with outline as it doesn't share the same border-left etc
border: double 4px black;
outline: solid 3px black;
any help would be great
Why not remove the outline and instead create a nested element inside of the element?
You can do like this:
Create nested elements in HTML:
<div class="big">
<div class="small">Some text Here.....</div>
</div>
Then apply CSS:
.big{
border: 5px solid green;
border-bottom: none;
}
.small{
border: 2px solid black;
border-bottom: none;
margin: 2px;
}
No need to use the outline.
You can use box-shadow instead of outline - see demo below:
div {
line-height: 20px;
border-color: black;
border-style: double;
border-width: 4px 4px 0 4px;
box-shadow: -3px 0 0 0 black, /* left */
3px 0 0 0 black, /* right */
3px -3px 0 0 black, /* top */
-3px -3px 0 0 black; /* top */
}
<div> </div>
Create nested elements with their own id's
<div id="outer-border">
<div id="inner-border"></div>
</div>
Then set the correct CSS properties for those elements, for example something like:
#outer-border{border-bottom: none}
#inner-border{border-bottom: none}
Here is an idea using gradient to create the second border.
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
padding:3px; /*control the distance between border*/
padding-bottom:0;
background:
linear-gradient(green,green) top /100% 4px,
linear-gradient(green,green) left /4px 100%,
linear-gradient(green,green) right/4px 100%;
background-repeat:no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
Another idea using pseudo element:
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:3px;
left:3px;
right:3px;
bottom:0;
border: solid 4px green;
border-bottom:none;
}
<div class="box">
</div>
.st1, .st2 {
background-color: yellow;
}
.st1 {
outline: solid 3px black;
width: 400px;
height: 200px;
position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}
<div class="st1"><div class="st2"></div></div>
or
.st1, .st2 {
background-color: yellow;
}
.st1 {
border: 3px solid black;
border-bottom: none;
width: 400px;
height: 200px;
position: relative;
box-sizing: border-box;
}
.st2 {
border: 1px solid black;
border-bottom: none;
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 0px;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
<div class="st1"><div class="st2">test</div></div>
I want to make a background image to be seen over div. Anything that I've tried with z-index didn't helped me. Image itself has not standard shape and glowing border. As image ends ideally "logo2" should imitate that "glowing" by box-shadow parameter. But anything I've tried "logo2" always over "logo" crosses the image. This is how I want it to be like site.com/logo2.png
.logo {
background: url(site.com/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 100%;
height: 50px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:relative;
z-index:10;
<div class="logo">
<div class="logo2"></div>
</div>
I guess this is what you want. You can adjust width of .logo2 accordingly
.logo {
background: url(http://homeworld.su/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 20%;
height: 40px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:absolute;
top:10px;
left:495px;
<div class="logo">
<div class="logo2"></div>
</div>
Is it possible to add an even shadow to a div that is not a regular rectangle? Adding box-shadow doesn't work the way it works with a normal div. This is the div I'm talking about:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
yes you can. Here is the example:
.circle {
width:150px;
height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
<div class="circle">
</div>
I have a css tooltip on my html. I get the arrow mark(bubble:after) at the bottom of my bubble. How can I re-arrange to right center of my bubble?
Here is my div
<div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>
The bubble which is displayed on my div is from the css below
<style type="text/css">
.bubble {
position: relative;
background-color:#eee;
margin: 0;
padding:10px;
text-align:center;
width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
.bubble:after { //This after mark has to be arranged so to point to the right of bubble
position: absolute; //The position should be at the center
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
Rearrange like below image
Check out this jsFiddle. All you need to do is change the absolute positioning of the ::after element, and switch which border has a colour, from this:
border-color: blue transparent transparent transparent;
bottom:-19px;
left:1em;
To this:
border-color: transparent transparent transparent blue;
bottom:25%;
right:-19px;
This will do the trick, http://jsfiddle.net/elclanrs/hu38A/1
.bubble:after {
content: "";
position: absolute;
border-color: transparent transparent transparent red;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
top: 50%;
margin-top: -10px; /* border-width */
right: -20px; /* border-width*2; */
}