I'm trying to get better at JS and CSS, so I'm making a fake iPhone and am trying the simulate the look of when a text bubble pops on and off screen.
This is what it looks like so far, and this is the HTML for the phone itself:
<div id="iPhone">
<div id="screen"></div>
<div id="me" class="bubble"></div>
<div id="homeButton" class="circle"></div>
</div>
As well as the style sheet:
#iPhone {
position: fixed;
width: 250px;
height: 500px;
background-color: black;
border-radius: 25px;
top: 50%;
right: 30%;
transform: translate(-50%, -50%);
-webkit-filter: blur(3px);
box-shadow: 0 0 40px 20px white;
border: solid 2px white;
}
#me {
background-color: #1D62F0;
margin-top: 130%;
margin-left: 25%;
}
#me::after{
content: "";
position: absolute;
right: 0em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1D62F0;
border-bottom-left-radius: 1em 0.5em;
}
#screen {
position: fixed;
width: 241px;
height: 370px;
background-color: white;
border-radius: 0px;
top: 8%;
left: 1%;
-webkit-filter: blur(3px);
border: solid 2px black;
}
Right now, there's no JS governing it. How do I make it naturally slide onto the "screen" div and then disappear off the top, just like a real text message?
Thanks!
You need to put the overflow: hidden property on the message container div, then simply push new message boxes beneath the already existing ones, so they disappear eventually.
Related
I'm a newbie to HTML and CSS, facing a problem where when I resize my page, the elements go berserk. I've tried everything from creating a main wrapper and adding max widths and heights, but all to no avail. Here is my code in CSS so that you can take a look.
body {
background-image: url(3eMAHaa.jpg)
}
div.header {
border: 1px solid black;
border-radius: 50px;
padding-top: 26%;
padding-bottom: 26%;
padding-left: 10%;
padding-right: 10%
}
h1 {
;
position: absolute;
top: 30%;
left: 40%;
color: #FF2B24;
font-family: helvetica
}
.someimage {
position: absolute;
top: 43%;
left: 32%
}
div.navbox {
border: 1px solid black;
border-radius: 50px;
padding-top: 70px;
padding-bottom: 70px;
padding-left: 500px;
padding-right: 500px;
position: absolute;
top: 1%;
right: 2%
}
img.about {
border: 1px solid gray;
position: absolute;
right: 80%;
top: 35%
}
}
img.location {
border: 1px solid gray;
position: absolute
}
img.contact {
border: 1px solid gray;
position: absolute;
right: 15%;
top: 35%
}
Remove your all padding code then it will not be resized
Never mind guys, figured it out. I had to set a a bigger DIV as a parent and then change all the other elements to relative positioning so they wouldn't move about. It was a hassle, but it worked! :). Also, try to use pixels instead of % as percentages aren't fixed values and will cause stuff to go crazy when you zoom.
I want to give a border on all sides to a one sided-skewed box, but I am unable to do so.
The css code written for this is
.block{
height: 400px;
width: 100%;
position: relative;
background: yellow;
height: 100px;
width: 100px;
border-top: 2px solid teal;
border-bottom: 2px solid teal;
border-left: 2px solid teal;
}
.block::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top:0;
right:0;
transform-origin: right bottom ;
transform: skewX(-20deg);
border-right: 2px solid teal;
}
DEMO
Does anyone have a solution for this problem?
All you need to do is play around a bit more with the borders and positioning of the pseudo element. Something like this:
.block {
position: relative;
background: black;
height: 100px;
width: 100px;
border: 2px solid teal;
border-right: none;
}
.block::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top: -2px;
right: -2px;
transform-origin: right bottom;
transform: skewX(-20deg);
border: 2px solid teal;
}
<div class="block"></div>
I've been trying to draw a line down the middle of a series of circles however if I set a line (.Line1) to fit between the first and last element then it's drawn from the top left of the first element and not centralised. If i set a line (.Line2) to fit in the middle by changing the percentages it will look fine at 100% zoom however if you zoom in or out of the screen it moves around.
I know it is possible to do using pure javascript however I cannot figure out how to do it with css created elements.
<style>
.A,.B,.C,.D, .E {
position: absolute;
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.A {
top: 10%;
left: 50%;
}
.B {
top: 25%;
left: 50%;
}
.C {
top: 40%;
left: 50%;
}
.D {
top: 55%;
left: 50%;
}
.E {
top: 70%;
left: 50%;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 4px;
background: black;
}
.Line2{
position: absolute;
left: 51.3%;
top: 15%;
height: 60%;
width: 4px;
background: black;
}
</style>
<body>
<div class = "A"></div>
<div class = "B"></div>
<div class = "C"></div>
<div class = "D"></div>
<div class = "E"></div>
<div class = "Line1"></div>
<div class = "Line2"></div>
</body>
http://codepen.io/anon/pen/ZWMbNe
You need to take border, width and height into account. you cannot draw half a pixel. For example this is a center line:
.A,.B,.C,.D, .E {
position: absolute;
width: 46px;
height: 46px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 2px;
background: black;
transform: translate(24px,23px);
}
give one of the lines a margin-left that will be equal to half of the circle's width.
that way the line will always stay in the middle no matter if you zoom in or out.
.Line1{
position: absolute;
left: 50%;
top: 15%;
height: 60%;
width: 4px;
margin-left:23px;
margin-top:0px;
background: black;
}
You need to wrap your circles into a parent Element. So that you can align the Black line according to the parent Div and not the window size.
Moreover you can use the pseudo selector :before or :after for the line.
HTML
<div class="cirCont">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
</div>
CSS
.A,.B,.C,.D, .E {
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.cirCont{
float:left;
position:relative;
top: 100px;
left: 50%;
}
.cirCont:after{
content:"";
position: absolute;
left: calc(50% - 2px);
top: 10%;
height: 80%;
width: 4px;
background: black;
z-index:10;
}
Checkout this pen
I would like to increase jQuery mobile slider's handle clickable area. As of now, the handle's clickable area is small. so, I am unable to tap and change the range of the handle everytime. I want to have the handle size to be the same but increase the clickable area. My custom CSS is as follows.
.ui-slider-track .ui-btn.ui-slider-handle {
width: 12px;
height: 12px;
margin: -10px 0 0 -10px;
background-color:#0096E2;
padding: 5px;
border-color: #0096E2;
}
div {
position: relative;
width: 100px;
height: 100px;
border: 1px dashed #eee;
cursor: pointer;
transition: background-color 1.5s;
}
div::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: rgb(188,20,20);
border-radius: 2px;
}
div:hover {
background-color: #FFFFDF;
}
<div></div>
I am looking to draw a horse-shoe like gauge using CSS like the following picture below:
The way I've tried is doing something like creating a circle and cutting off the bottom like this fiddle: http://jsfiddle.net/Fz3Ln/12/
markup:
<div class="container">
<div class="horse-shoe-gauge"></div>
</div>
css:
.container {
width: 200px;
height: 180px;
overflow: hidden;
}
.horse-shoe-gauge {
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid black;
box-sizing: border-box;
}
But I'm not able to get the circular rounded bottom.
Any advice would be appreciated. Thanks.
I added an outer container and then absolutely position a couple extra pieces to get the rounded bottoms you were looking for.
HTML
<div class="outerContainer">
<div class="container">
<div class="horse-shoe-gauge"></div>
</div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>
CSS
.outerContainer {
position: relative;
}
.container {
width: 200px;
height: 180px;
overflow: hidden;
}
.horse-shoe-gauge {
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid black;
box-sizing: border-box;
}
.bottom {
position: absolute;
width: 25px;
height: 10px;
border-radius: 8px;
background: #000;
}
.left {
bottom: -6px;
left: 38px;
-webkit-transform: rotate(32deg);
}
.right {
bottom: -6px;
left: 137px;
-webkit-transform: rotate(-32deg);
}
Here's a jsFiddle
Something a bit different with :before and :after so that the html doesn't need to be modified.
I would however probably consider using canvas instead as it will give more control.
http://jsfiddle.net/Fz3Ln/16/
.horse-shoe-gauge:before {
content: "";
display: block;
position: absolute;
bottom: -5px;
left: 12px;
height: 10px;
width: 10px;
border: 15px solid white;
border-top-color: transparent;
border-left-color: transparent;
background-color: black;
background-clip: padding-box;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.horse-shoe-gauge:after {
content: "";
display: block;
position: absolute;
bottom: -5px;
right: 12px;
height: 10px;
width: 10px;
border: 15px solid white;
border-top-color: transparent;
border-right-color: transparent;
background-color: black;
background-clip: padding-box;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
To see how it's working, see this fiddle.
Try this on for size:
http://codepen.io/robcampo/pen/YXpWLP
Should work from IE10+. It essentially rotates two divs beside each other and uses markers to round out the edges:
<div class="radial-wrapper">
<div class="radial-section radial-right-section">
<div class="wedge"></div>
</div>
<div class="radial-section radial-left-section">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
It may be somewhat hard to read but it originates from this tutorial:
https://cssanimation.rocks/watch/
which goes through each step.