What i have made so far is here http://jsfiddle.net/cmRHp/1/
<div class="tv">13.3"</div>
and i want to make exactly like this
Those aren't actual rounded borders, so you probably have to use 2 elements.
.tv {
position: relative;
width: 200px;
height: 150px;
margin: 50px auto 0;
background: black;
color: white;
font: bold 300%/3.6 sans-serif;
text-align: center;
border-bottom-right-radius: 15px 70px;
border-top-right-radius: 15px 70px;
border-top-left-radius: 15px 70px;
border-bottom-left-radius: 15px 70px;
}
.tv-inner {
background: black;
height: 180px;
margin: 0 15px;
position: relative;
top: -15px;
border-bottom-right-radius: 70px 15px;
border-top-right-radius: 70px 15px;
border-top-left-radius: 70px 15px;
border-bottom-left-radius: 70px 15px;
}
<div class="tv">
<div class="tv-inner">13.3"</div>
</div>
http://jsfiddle.net/cmRHp/6/
Related
I have this image that I'm trying to position to a certain spot, but no matter what I try the image stays a the bottom. I've been able to center the image horizontally but now I want to manipulate it vertically and get it to the top or near the top area. It baffles me how margin isn't working; how would I go by doing it?
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to bottom right,#e66465, #9198e5);
font-family: sans-serif;
}
.signup-forms{
background-color: #ffffff;
max-width: 350px;
margin: 5% auto;
text-align: center;
border-radius: 5px;
box-shadow: 0px 0px 25px 0 #3d3d3d6e;
padding: 20px 5px;
}
.signup-forms h3{
color: #EB4D8A;
margin-top: 20px;
}
.signup-forms p{
color: #C3BFDA;
font-weight: 600;
font-size: small;
margin-bottom: 20px;
}
.signup-input{
outline: none;
width: 75%;
background-color: transparent;
padding: 10px 5px;
border: none;
border-bottom: 1px solid #C3BFDA;
font-weight: bold;
margin: 15px;
}
.signup-input::placeholder{
color: #C3BFDA;
}
.signup-btn{
background-color: #fc4186;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 20px;
transition: 0.3s;
}
.signup-btnTwitter{
background-color: #54ACF0;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 10px;
transition: 0.3s;
}
.logo-img{
height: 60px;
width: 60px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100%;
}
The image I'm trying to manipulate is .logo-img
We can't know much since there's not html code, but you can do :
`margin-top : -100px` //or how many pixels you like
or you can use the :top or bottom
Example:
top: 20%
or
bottom : 20%
or you can :
position: absolute;
z-index : 1;
I would like to give specific color font when I mouse over.
<div className="actions" className="icon"><div><span></span>trailer</div></div>
I tried but didn't work. Is there another way than :hover??
.icon:hover , .actions:hover{
color : #FF382E;
}
.actions{
position: absolute;
right: 20px;
top: 20px;
}
.icon{
float: right;
width: 50px;
height: 14px;
padding: 30px 0 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #E0E0E0;
text-align: center;
font-size: 13px;
color: #93939c;
position: relative;
cursor: pointer;
}
The hover part is fine, the only problem is that :hover targets the element being hovered by default. You can adapt your css to target the element more specifically:
.icon:hover , .actions:hover div a{
color : #FF382E;
}
.actions{
position: absolute;
right: 20px;
top: 20px;
}
.icon{
float: right;
width: 50px;
height: 14px;
padding: 30px 0 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #E0E0E0;
text-align: center;
font-size: 13px;
color: #93939c;
position: relative;
cursor: pointer;
}
<div class="actions" class="icon">
<div>
<span></span>
trailer
</div>
</div>
Done some changes and updated your code.
.icon:hover a {
color: #FF382E;
}
.actions {
position: absolute;
right: 20px;
top: 20px;
}
.icon {
float: right;
width: 50px;
height: 14px;
padding: 30px 0 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #E0E0E0;
text-align: center;
font-size: 13px;
color: #93939c;
position: relative;
cursor: pointer;
}
<div class="actions icon">
<div><span></span>trailer</div>
</div>
JS Fiddle
I have a button spanning the right side of the window that will open a menu when clicked. When the scroll-bar appears on the page, however, the button nearly disappears behind it. My question is simply: how do I use CSS or JavaScript to take the scrollbar's width into consideration when calculating either the position or the width of the button? Thanks in advance.
HTML:
<body>
<div id='ui'>
<div id='menu' class='x'>
<div id='menuBtn'></div>
</div>
</div>
</body>
CSS:
#ui{
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#menu{
float: right;
height: 100%;
width: 600px;
background-color: white;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
transition: all .5s;
}
#menu.x{
margin-right: -595px;
box-shadow: 0px 0px 15px black;
}
#menu.x:hover{
margin-right: -575px;
box-shadow: 0px 0px 30px black;
}
#menu.o{
margin-right: 0px;
box-shadow: 0px 0px 45px black;
}
#menuBtn{
transition: all .5s;
background-color: red;
height: inherit;
width: 45px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-right: groove darkgray 5px;
border-left: groove darkgray 5px;
}
You can try this:-
#menuBtn{
transition: all .5s;
background-color: red;
height: inherit;
width: 45px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-right: groove darkgray 5px;
border-left: groove darkgray 5px;
position: absolute; // try with fixed
right: 0px;
}
I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below
#nameWidgeteMain {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
border: 1px solid #dbe0e3;
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
position: absolute;
width: 22px;
height: 31px;
top: 7px;
left: 270px;
background-color: rgb(237,237,237);
color: white;
border: 1px solid #dbe0e3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
text-align: center;
}
#nameWidgeteCloseTitle {
padding-top: 5px;
left: auto;
font-family: sans-serif;
font-size: 12pt;
color: rgb(158, 158, 158);
}
Maybe try something like this: http://jsfiddle.net/VNAZA/
Uses two divs: one with just the border, which gets layered under the rectangle and another with the actual content, layering over the rectangle. This way you can also apply css box-shadow to the lower div.
.container{
position:relative;
width: 50px;
height: 150px;
}
.rect{
position:absolute;
width: 50px;
height: 150px;
background: #eee;
border: 1px solid #000;
z-index: 5;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
.round_content{
position: absolute;
top: 50px;
right: -25px;
width: 50px;
line-height: 50px;
background: #eee;
z-index: 6;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.round_border{
position: absolute;
top: 49px;
right: -26px;
width: 52px;
height: 50px;
line-height: 52px;
border: 1px solid #000;
z-index: 4;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
<div class="container">
<div class="rect"></div>
<div class="round_content">x</div>
<div class="round_border"></div>
</div>
This is not possible with CSS.
Solution A) involves graphics used as background and solution B) uses a layer behind the vertical bar to draw the oval, a second layer for the bar itself and a third DIV for the X and it's link.
Use z-index property.
#nameWidgeteMain, #nameWidgeteMain2 {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
#nameWidgeteMain2 {
z-index: -2;
border: 1px solid #dbe0e3;
}
.nameWidgeteCloseArea {
z-index: -1;
...
}
This is not merging but the result is the same.
I need to make a shape like the one below and was trying to get it working with CSS.
The closest I could get was like this. I had to push the shadow on the bottom part down or else it would overlap with the shadow on the top.
Is it possible to actually make the top version with CSS?
Working Example Here
CSS
.block-a {
display: block;
height: 200px;
width: 200px;
background-color: #8BC541;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 0;
border-radius: 10px;
border-bottom-right-radius: 0;
}
.block-b {
color: #fff;
text-align: center;
line-height: 40px;
position: relative;
display: block;
height: 40px;
width: 80px;
margin-left: 120px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px#000;
box-shadow: 0 0 10px #000;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #8BC541;
}
.block-b:before {
position: absolute;
background-color: #8BC541;
height: 11px;
width: 90px;
top: -11px;
left: -10px;
display: block;
content: "";
}
.block-b:after {
padding-left: 5px;
color: #fff;
content: "▲";
}
HTML
<div class="block-a"></div>
<div class="block-b">Login</div>
Image
It's an answer pile-on! Looks like you have lots of options to work with. I'll add another to the pile: http://jsfiddle.net/XrkJq/