This question is to broad, I know, but anyway...
How can I achieve the same result as the image below using HTML, CSS and JS (maybe images)? The number of "levels" are unpredictable and every "level" of the building must be clickable, an , or something like this.
Is that possible?
I build something with css transformations. Not perfect but i guess you'll see the point. It's using transformations for the roof and the side elements and adds the side elements through a pseudo class.
#stack {
padding: 10px;
}
.roof {
width: 100px;
height: 20px;
background: #aff;
transform: translateX(10px) skewX(135deg);
padding-top: -20px;
}
.level {
text-align: center;
width: 100px;
height: 20px;
background: #99f;
margin: 1px;
}
.level:after {
display: block;
width: 20px;
height: 20px;
background: #00f;
content: "";
margin-left: 100px;
transform: translateY(-30px) skewY(135deg);
}
.level:hover {
background: #f99;
}
.level:hover:after {
background: #f00;
}
<div id="stack">
<div class="roof"></div>
<div class="level">1</div>
<div class="level">2</div>
<div class="level">3</div>
<div class="level">4</div>
</div>
Feel free to use links inside of the levels.
Edit: added :hover highlighting
You have to play a bit with css transform and pseudo elements.
Just a quick and dirty example:
a {
display:block;
width:100px;
background:blue;
height: 30px;
line-height:30px;
color: #fff;
text-align:center;
margin-bottom:2px;
position:relative;
}
a:after {
position:absolute;
content:"";
background:darkRed;
height: 20px;
width: 42px;
right: -36px;
top:-2px;
transform: skew(-45deg) rotate(45deg);
}
div {
padding:100px;
}
<div>
one
two
three
four
</div>
Yes, it is possible
you can use canvas or SVG
Related
<script>
(function($) {
$(document).on('facetwp-refresh', function() {
$('.facetwp-template').prepend('<div class="is-loading">Loading...</div>');
});
$(document).on('facetwp-loaded', function() {
$('.facetwp-template .is-loading').remove();
});
})(jQuery);
</script>
<style>
.is-loading{
position: relative;
width: 100%;
height:100%;
align-content:center;
align-items:center;
justify-content:center;
text-align:center;
font-size:18px;
font-weight:400;
color: white;
}
</style>
I have a lot of trouble trying to center my .is-loading div inside .facetwp-template I want it to always be in the center of the content .facetwp-template
if someone can simulate such a situation
.facetwp-template can be any div and insert a loading div inside and show me what I missed and didn't understand.
maybe even add an ovelay effect to see the "white" loading text
and if you're crazy enough
maybe also insert a slightly exotic loading animation like a spinning icon?
what I got
what I want
You need to give display: flex; or display: inline-flex; to your .is-loading class. Only then you can apply other flex-related attributes to your class.
Check this fiddle: https://jsfiddle.net/enginustun/p32zbkwn/2/
You can try following style;
.is-loading {
display: flex;
position: relative;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 400;
color: white;
}
Make position absolute and then adjust your div position on the screen. Something like:
<style>
.is-loading{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height:100%;
align-content:center;
align-items:center;
justify-content:center;
text-align:center;
font-size:18px;
font-weight:400;
color: white;
}
</style>
Making it absoulte and give top, left 50% to place it center of the screen.
Then translate by -50%.
.is-loading{
position: absoulte;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height:100%;
text-align:center;
font-size:18px;
font-weight:400;
color: white;
}
I have been for long trying to make an HTML box slide on hover and reveal the text beneath it using CSS or JS. I am new to JavaScript so it would be great if you provide a bit of explanation with the answer if its to be achieved by JS.
I have searched many sites and asked a lot of people but I haven't been able to achieve it.
I have made two DIVs, one being underneath the other
I tried writing some example text, but it appears before the box
.trigger{
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box{
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
}
.trigger:hover .box{
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="box"></div>
</div>
All you need to do is add a z-index:
.trigger {
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
z-index: 2;
}
.content {
position: absolute;
z-index: 1;
}
.trigger:hover .box {
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="content">Content</div>
<div class="box"></div>
</div>
I have an Instagram section on my website which works the way I want it but I want to add another div with background color and text to the right of it so it looks like it is part of the grid but it's not!
I have it set up but when scaling the browser it does not stay with it at all can anybody help me out? Here are my HTML and CSS and also an image on how it should look.
.Container-Instagram {
margin-top: 5%;
width: 85%;
}
.H1-Instagram {
font-size: 48px;
color: #d7aa44;
}
.Instagram-Title {
background-color: #f8db74;
position: absolute;
margin-top: 204px;
margin-left: 792px;
padding: 30px;
width: 50%;
height: 187px;
text-align: center;
}
.cross-text2 {
display: inline-block;
position: relative;
}
.cross-text2::before {
background-color: #d7aa44;
content: "";
height: 4px;
position: absolute;
top: 37px;
left: 4px;
width: 100%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.Container-Instagram a {
border: 5px solid #fff;
display: inline-block;
line-height: 0;
width: 20%;
}
.Container-Instagram #instafeed a:first-child {
margin-left: 40%;
}
.Container-Instagram #instafeed a:nth-child(8n + 8) {
margin-left: 0.05%;
}
.instagram-section {
width: 75%;
}
<div class="Container-Instagram">
<div class="Instagram-Title"><h1 class="H1-Instagram">Get On The <span class="cross-text2">Insta</span> Gram</h1></div>
<div id="instafeed" class="instagram-section"></div>
</div>
The snippet does not work because of the JS but it is just for showing my code. this is what the end result should look like(red squares are instagram posts):
Image Example
Here is the web address I'm using to develop on if you want a better view of what I mean http://s749376357.websitehome.co.uk/ :D Thanks
Remove the margin-left:792px; on .Instagram-Title replace it with right:100px; then add position:relative; to .Container-Instagram this will then follow as you resize - you will however still need to do some work to make it fully responsive.
I'm planning to change all the input[type=submit]s & buttons in my website into this smooth animated flowing button.
So, how do I create this using HTML, JavaScript & CSS? Especially I made this GIF to post it in Stack Overflow. And I don't think, I've to post some codes in this question to explain it. :/
EDIT: I don't want exactly Curls effect with bottom right to top left. It should start affecting from the area I click. In the next GIF I've clicked in the middle. Now please see the affect.
I hope you can understand what I mean. It should start flowing to the outside from the exact area I click.
You can use hover.css, Checkout background transition in that
http://ianlunn.github.io/Hover/ .
If you want exactly like the one you posted. you can always try some trial and error with hover.css
you can easily make with simple css see this click
Hope this helps!
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
overflow: hidden;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<button class="button">Click Me</button>
Please check this , hope it is helpful.
a {
padding: 20px 30px;
line-height:30px;
color:#fff;
font-size: 20px;
background:#ff0000;
text-decoration: none;
position: relative;
transition: all ease .6s;
overflow:hidden;
display: inline-block;
}
a span {
z-index:1;
position:relative;
}
a:after {
transform: scale(0);
background: #000;
position: absolute;
right:-200px;
bottom:-200px;
content:'';
border-radius: 100%;
transition: all ease .6s;
width: 400px;
height: 400px;
}
a:hover:after {
transform:scale(1);
transition: all ease .6s;
}
<span>Test</span>
can be achieved by a small tweak from "Abhitalks" answer from this question!
In html :
<div class="outer_box" id="btn">
<span>Button text</span>
<div id="dummy"></div>
</div>
css :
.outer_box{
background-color: transparent;
width: 400px;
height: 400px;
position: relative;
border: 1px solid silver;
text-align:center;
}
#dummy {
position: absolute;
top: 400px; left: 400px;
width: 1px; height: 1px;
background-color: gray;
z-index: -5;
}
Script :
$('#btn').on("click", function() {
$('#dummy').animate({
'width': '400px',
'height': '400px',
'top': '0px',
'left': '0px'
}, 500);
//and any action to be done on click :)
});
ok, I have a custom <ins> tag as following:
ins{
color:blue;
font-weight:500;
text-decoration:none;
}
ins:hover{
cursor: pointer;
cursor: hand;
text-decoration:underline;
}
I want that when user mouses over the text inside an <ins> tag, then a small tooltip will popup saying that "This is inserted text".
So, basically, we should modify the ins:hover like the following:
ins:hover{
cursor: pointer;
cursor: hand;
text-decoration:underline;
tooltip:"This is inserted text";
}
Can we achive something like that?
If we can't do thing like that then
Is there any html basic tag that has tooltip popup, which meets my requirement?
Note: Basic tag means any tag that can work without needing any attibute. For security reason, I can't use any attribute in basic html tag.
I have created a tooltip demo which uses jquery to display a tooltip. This may be a possible solution for you.
It uses a div container to store individual tooltips, which are shown/displayed and positioned when a user hovers over a trigger point. Each trigger is linked to an individual tooltip by specifying a tooltip id. The positioning of the tooltip is based on the mouse cursor position and the location of the trigger point with regard to the window (if the window has scrolled down).
Hope this is of use.
A css solution might use the content: rule. Perhaps also using the :before or :after selectors.
ins:hover::after{content:"tooltip text"};
However this approach may become quite cumbersome when used multiple times across the entire site.
here some answer hope solve your problem
demo jsfiddle
html
<div class="wrapper">
I have a tooltip.
<div class="tooltip">I am a tooltip!</div>
</div>
css
.wrapper {
text-transform: uppercase;
background: #ececec;
color: #555;
cursor: help;
margin: 100px 75px 10px 75px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 200px;
}
.wrapper .tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
There are many, many ways to do this from as simple "title" as mentioned in CBroe's excellent suggestion, to the very elegant method of lukeocom. You could hide a div, and pop it up, and use a plugin. Based on CBroe's and lukeocom's excellent suggestions, I've thrown together a rudimentary example with :after.
FIDDLE
CSS
ins{
color:blue;
font-weight: 500;
text-decoration:none;
position: relative;
}
ins:hover{
cursor: pointer;
cursor: hand;
text-decoration:underline;
}
ins:after {
content: 'This is the inserted text';
display: none;
width: 100px;
color: white;
border: 1px solid red;
background-color: green;
position: absolute;
left: 100%;
top: 10px;
}
ins:hover:after {
display: inline-block;
}
And a question out of pure ignorance, Why did you need to create a new element 'ins'?