following is the html code i have written
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
width: 200px;
height: 250px;
border-radius: 15px;
background-color: pink;
border-color: red;
border-style: solid;
display: block;
-webkit-animation: myrotate 3s infinite; /* animation enabled */
}
#box:after /* not working if animation is disabled*/
{
content:"";
display:block;
position:absolute;
bottom:-15px;
left:20px;
width:0;
border-width:15px 25px 0;
border-style:solid;
border-color:#13961c transparent;
}
#-webkit-keyframes myrotate
{
from
{
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
to
{
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}
}
</style>
</head>
<body>
<center>
<div id="box">
xyz <br/>
yzx <br>
</div>
</center>
</body>
</html>
the problem is the speech bubble pointer appears only when animation myrotate is enabled. If it is commented the pointer disappear. I am new to css3 and html5. please explain.
Add this to the CSS:
#box {
position: relative;
}
The elements which have a position absolute will only be positioned with respect to the closest parent which also has a position other than the default (static) or if none of the parents have a non-static position, then the position is determined wrt the viewport.
I suspect when an element is animated, the browser doesn't treat is as a statically positioned object anymore.
Related
I want to make a cool effect for an input box. I want this to happen:
When the user clicks the input box, the top of the input border (border-top) to move elegantly into input border's bottom place (border-bottom).
However, I quickly learned that you can't move an elements border-top into the border-bottom's place.
So I have made a solution that works (kinda)! By placing the input inside of a span element, I'm able to transtion the span's border-top down to give the illusion that the top of the input border is moving down.
The only problem is that when span's border moves over the input box, you can no longer see it since the input box has a greater z-index (I'm guessing).
Here's my solution:
<!DOCTYPE html>
<html>
<head>
<style>
/* input box - no border, no ouline, and a transition to move up (to cancel out the transtion made by the parent).*/
input{
border: 1px solid transparent;
outline: none;
transition: transform 2s;
}
/* span - red border and a transition to move down */
span{
display: inline-block;
content: '';
border-top: 1px solid red;
transition: transform 2s;
}
/* on focus of the child element of span - transform span down */
span:focus-within{
transform: translate(0%, 30px);
}
/* while active or focused on input - transform input up*/
input:active, input:focus {
transform: translate(0%, -30px);
}
</style>
</head>
<body>
<span>
<input type='text' placeholder='john doe'/>
</span>
</body>
</html>
So, naturally, I thought the solution would be to grant a higher z-index to span element.
The issue is, if I do that then the whole thing breaks because input is a child of span... So, if span has a higher index, then I can never enter any text into the input box.
As shown below:
<!DOCTYPE html>
<html>
<head>
<style>
/* input box - no border, no ouline, and a transition to move up (to cancel out the transtion made by the parent).*/
input{
border: 1px solid transparent;
outline: none;
transition: transform 2s;
position: relative;
z-index: -1;
}
/* span - red border and a transition to move down */
span{
display: inline-block;
content: '';
border-top: 1px solid red;
transition: transform 2s;
position: relative;
z-index: 1;
}
/* on focus of the child element of span - transform span down */
span:focus-within{
transform: translate(0%, 30px);
}
/* while active or focused on input - transform input up*/
input:active, input:focus {
transform: translate(0%, -30px);
}
</style>
</head>
<body>
<span>
<input type='text' placeholder='john doe'/>
</span>
</body>
</html>
Please may someone show me how to be able to interact with the input box and let the span border glide, visibly, across the input box?
Add background: transparent to the input field.
Instead of trying to switch the position of two items, you can just render a line using :before. This prevents the position of the red line from altering the position of the input.
<!DOCTYPE html>
<html>
<head>
<style>
/* input box - no border, no outline */
input{
border: 1px solid transparent;
outline: none;
}
span{
position: relative
}
/* red border and a transition to move up */
span:before{
height: 0;
position: absolute;
width: 100%;
display: block;
content: ' ';
border-top: 1px solid red;
transition: top 1s;
top: 0;
}
/* on focus of the span - transform line down */
span:focus-within:before{
transition: top 1s;
top: 100%;
}
</style>
</head>
<body>
<span>
<input type='text' placeholder='john doe'/>
</span>
</body>
</html>
You can nest an input and span into a div tag and transform a span from top to bottom relatively to a div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<style>
input:focus {
border: none !important;
outline: none !important;
}
#inp:focus~span {
top: 100%
}
</style>
</head>
<body class="bg-gray-900">
<div id="input-wrapper" class="relative w-64">
<input id="inp" class="block w-full px-2 py-4" placeholder="what need to be done">
<span class="absolute w-full top-0 block duration-300 left-0 border border-solid border-green-500"></span>
</div>
</body>
</html>
Here's the answer, kinda a no-brainer, make the input background color transparent.
<!DOCTYPE html>
<html>
<head>
<style>
/* input box - no border, no ouline, and a transition to move up (to cancel out the transtion made by the parent).*/
input{
border: 1px solid grey;
outline: none;
transition: transform 1s;
background-color: transparent;
color: black;
z-index: -1;*/
}
/* span - red border and a transition to move down */
span{
display: inline-block;
content: '';
border-top: none;
transition: transform 1s;
}
/* on focus of the child element of span - transform span down */
span:focus-within{
border-top: 1px solid grey;
transform: translate(0%, 20px);
}
/* while active or focused on input - transform input up*/
input:active, input:focus {
border: 1px solid transparent;
transform: translate(0%, -20px);
}
</style>
</head>
<body>
<div>
<span>
<input type='text' placeholder='john doe'/>
</span>
</div>
</body>
</html>
However, this will only work if you want the background of the input box to be the same as the background of the page. If not, you could just wrap it in another span or div tag, like so:
<!DOCTYPE html>
<html>
<head>
<style>
/* input box - no border, no ouline, and a transition to move up (to cancel out the transtion made by the parent).*/
body{
background-color: grey;
}
input{
border: 1px solid white;
outline: none;
transition: transform 1s;
background-color: transparent;
color: white;
z-index: -1;*/
}
/* span - red border and a transition to move down */
span{
display: inline-block;
content: '';
border-top: none;
transition: transform 1s;
}
/* on focus of the child element of span - transform span down */
span:focus-within{
border-top: 1px solid white;
transform: translate(0%, 20px);
}
/* while active or focused on input - transform input up*/
input:active, input:focus {
border: 1px solid transparent;
transform: translate(0%, -20px);
}
div{
background-color: black;
display:inline-block;
}
</style>
</head>
<body>
<div>
<span>
<input type='text' placeholder='john doe'/>
</span>
</div>
</body>
</html>
I have CSS animations running on an HTML element but I am unable to position the HTML element freely on the HTML page so, how would I do this?
I have tried using doing this in order to position the HTML element freely on the page.
<div style="text-align: center;"><p class="animated flipInX">2</p></div>
But it does not work.
/* GLOBAL STYLES */
body {
background: #011;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #fff;
font-family: Consolas,monaco,monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<div class="typewriter">
<h1>1</h1>
</div>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<p class="animated flipInX">2</p>
</head>
</html>
To position things anywhere on the screen, likely means you also want to be able to use any part of the screen even if there were items all over the page. Best way to do this is to use the position css property. so on whatever you want to move around, write a css class or id to it like this;
position: absolute;
z-index: 1;
top: 0px;
left: 200px;
Here is a link I played with the example you gave. https://jsfiddle.net/cphutx78/
Let me know if it hel
I'm working on an overlay on top of a full-frame google docs iframe. I want the top section of the docs to be covered by an 100% width div which fades on hover, revealing the docs options which become clickable.
I've got the fade transition working but the invisible div blocks the iframe from been clicked. If I use pointer-events:none, change the z-index or display:none I get a nasty flickering effect when the cursor is moved.
Is there a work around?
https://github.com/plasticplant/miscresearch/tree/master/miscresearch
#background-site {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#background-site iframe {
width: 100%;
height: 100%;
border: none;
overflow: scroll;
}
#header {
position: absolute;
width: 100%;
z-index: 30;
font-size: 55px;
font-family: 'Sporting_Grotesque-Bold';
padding: 5px;
text-align: center;
transition: 0.3s;
background: white;
}
#header:hover {
opacity: 0;
}
<div id="header">
miscresearch
</div>
<div id="background-site"><iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe></div>
Try this, should work -- i replicated your problem using some divs, but it gets the point across.
First, use the style "pointer-event:none;" to make the upper level div able to be selected through. The lower div has mouseover and mouseout events that call javascript to change the opacity of the overlay.
You can try applying the mouseover and mouseout functions to the div containing the iframe
function hidefunc(){
document.getElementById("test").style.opacity = '0';
}
function showfunc(){
document.getElementById("test").style.opacity ="1"
}
#test{
position:absolute;
top:0px;
width:300px;
height:300px;
background-color:#000000;
transition: opacity .5s;
pointer-events:none;
z-index:2;
}
#base{
position:absolute;
top:0;
z-index:0;
height:50px;
width:600px;
background-color:red;
}
<div id="test">
</div>
<div onmouseover="hidefunc()" onmouseout="showfunc()" id="base">
Link
</div>
Maybe using z-index is a better approach because when you do display:none; on :hover you are not hovering any element so the nasty effect happens.
#header:hover {
opacity: 0;
z-index: -1;
}
Iframes have a load event, which fire once they have loaded.
Simply create your overlay, and remove it once the iframe's onload event fires.
HTML:
<div id="background-site" class="showOverlay">
<iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe>
</div>
CSS:
#background-site {
position: relative;
}
#background-site.showOverlay:before {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: red;
z-index: 2;
}
JS :
document.getElementById("backgrnd").addEventListener("load", function() {
document.getElementById("background-site").classList.remove('showOverlay')
});
Fr the current code you could also use the parentElement, to achieve the same result, as the event fires on the iframe:
document.getElementById("backgrnd").addEventListener("load", function(e) {
e.target.parentElement.classList.remove('showOverlay')
});
Hi I've a working solution (see below).
Unfortunately it requires (vanilla) JavaScript; I hope you don't mind. I tried several CSS solutions like animations and all but to no avail.
Anyways, the trick is to use separate mouse in and mouse out event listeners on the iframe and overlays respectively.
document.getElementById("overlay").addEventListener("mouseover", overlayDisappear);
document.getElementById("theiframe").addEventListener("mouseout", overlayAppear);
function replaceAll(str, toFind, toReplace){
return str.replace(new RegExp(toFind.toString(),"g"), toReplace.toString());
}
function overlayAppear(){
//console.log("Appear", document.getElementById("overlay").className);
document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_disappear","_appear");
}
function overlayDisappear(){
//console.log("Disappear", document.getElementById("overlay").className);
document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_appear","_disappear");
}
#theiframe, #overlay{
width:200px;
height:200px;
position:fixed;
top:0;
left:0;
}
#theiframe{
border: 2px solid black;
}
#overlay{
background:red;
transition:all 0.3s ease;
}
#overlay._appear{
opacity:1;
z-index:1;
}
#overlay._disappear{
opacity:0;
z-index:-1;
}
/*
#overlay:hover{
animation-name: disappear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes disappear{
0% { opacity:1; }
50% { opacity:0.5; }
99% { opacity:0; z-index:1; }
100% { opacity:0; z-index:-1; }
}*/
<iframe id="theiframe" src="https://samleo8.github.io/web"></iframe>
<div id="overlay" class="_appear"></div>
I am just starting HTML and some basic CSS, Im here trying to make a Rocketship push up another image with some simple tags,
Ive tried everything.
I have right now,
<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>
I have tried some CSS which is in my stylesheet.css right now, and here is that code.
image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
and at this point, i dont even know if im using z-index in the right context. If its hard to see my vision, Im bascially trying to push and image up with another image under it. or create that kind of visual, i dont know if i have to edit the pixel and align them up. The rocket seems to be being in the center but the src="images.png" is on the side but its under the tag...
Sorry if this is dumb and simple but I couldnt find anything.
As Requested in comments; https://jsfiddle.net/7ohrpk42/
Updated Solution:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
<DOCTYPE HTML!>
<html>
<body bgcolor=“#add8e6”>
<title>The Most Best Worst Websites</title>
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png">
<img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png">
</marquee>
</div>
</body>
</html>
Your questions a little unclear without a jsFiddle, but I think you are trying to do something like this:
img {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
margin: none;
}
.imageTwo {
margin: none;
}
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://place-hold.it/20x30">
<br>
<img class="ImageTwo" src="https://place-hold.it/20x30">
</marquee>
</div>
What you're trying to achieve can be done by setting the "f&*k you" image as the background of the marquee and background size to 'cover'. Like this:
marquee{
background: url('https://i.postimg.cc/g2ZJTkHk/images.png') no-repeat;
background-size: cover;
}
I updated your fiddle https://jsfiddle.net/0vd79j2h/
<marquee> is Deprecated
It is strongly recommended that <marquee> be avoided -- it's deprecated and on its way to becoming obsolete. We can still customize HTML elements to behave and appear as a <marquee> with CSS animation (or even with JavaScript/jQuery although it wouldn't be as efficient as CSS). The following demo uses CSS animation only, and the only images are actually fonts (like emoticons)
Demo
.marquee {
width: 30%;
height: 50vh;
/* Required on Parent */
overflow: hidden;
font: 400 15vh/1.5 Consolas;
background: rgba(0, 0, 0, 1);
padding-left: 15px;
margin: 20px auto;
}
.marquee b,
.marquee i {
/* Required on Child*/
white-space: nowrap;
display: table-cell;
vertical-align: baseline;
/* Infinite Loops */
animation: climb 2s linear infinite;
animation-fill-mode: forwards;
/* Set to 0s in order to have a point of reference */
animation-delay: 0s;
}
.marquee i {
animation: fall 2s linear infinite;
}
/* Required for complex CSS animation */
/* Bottom to top / Left to right */
#keyframes climb {
0% {
transform: translate(-200%, 300%);
}
100% {
transform: translate(300%, -300%);
}
}
/* Top to bottom / Right to left */
#keyframes fall {
0% {
transform: translate(200%, -20%);
}
100% {
transform: translate(-300%, 300%);
}
}
<header class='marquee fall'>
<i>🌠</i><em>✨</em>
</header>
<header class='marquee climb'>
<b>🚀</b><em>🌌</em>
</header>
I have tried adding a custom cursor to my webkit pulltab, but cannot seem to get it working. Other elements, such as the background color are changable, but the css "cursor" property is not mutable:
#sessionbuilder::-webkit-resizer {
background: #000;
cursor: help !important;
}
EDIT
Well, a simple example with webkit is this one:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
cursor: wait;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect with a cursor wait.</p>
</body>
</html>
Yes.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
.foo { cursor: crosshair; }
/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in; cursor: zoom-in; }
/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }