I saw an example for Twitter Favorite animation and I used in my design for testing and now i have problem with alignment for the icons and I don't know how to fix it? Can anyone explain things to me, please?
Below you will the actual code use and I need all the icon with the text to be in one column some thing similar to twitter icon but very basic one.
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});
.postfooter {
display: flex;
justify-content: flex-start;
color: #b3b3b3;
margin-top: 30px;
font-size: 25px;
}
.postfooter .fa {
margin-left: 40px;
}
.heart {
cursor: pointer;
height: 70px;
width: 70px;
background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
background-position: left;
background-repeat:no-repeat;
background-size:2900%;
}
.heart:hover {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
#keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- Font-Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="postfooter">
<div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
<div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
<div><div class="heart"></div> 16</div>
</div>
</body>
</html>
The reason why your elements aren't aligning is because the div element containing your heart animation is a block-level element (versus the i elements with the font-awesome icons, which are inline).
To fix that part, you just have to add display: inline-block to the heart element. The height of your heart element is also 70px, so to align the other elements, you'll also need to add height: 70px and line-height: 70px; to your post-footer. Finally, to adjust for the fact that the heart element is much wider than the other elements, you can wrap the heart counts in a span and give it a negative margin.
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});
.postfooter {
display: flex;
justify-content: flex-start;
color: #b3b3b3;
margin-top: 30px;
font-size: 25px;
height: 70px;
line-height: 70px;
}
.postfooter .fa {
margin-left: 40px;
}
.heart {
display: inline-block;
cursor: pointer;
height: 70px;
width: 70px;
background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
background-position: left;
background-repeat:no-repeat;
background-size:2900%;
}
.heart-text {
margin-left: -20px;
}
.heart:hover {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
#keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- Font-Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="postfooter">
<div><i class="fa fa-reply" aria-hidden="true"> 2</i></div>
<div><i class="fa fa-retweet" aria-hidden="true"> 30</i></div>
<div class="heart"></div><span class="heart-text">16</span>
</div>
</body>
</html>
Related
I am trying to position a div in the center of a grid header but many of my attempts have failed.
Here's link to code pen: https://codepen.io/ZeePintor/pen/OKxLRe
Here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ermesinde Clube de Karaté</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="brand">
<img src="/images/eck_logo.png">
<div class="page-headers">
<h1>ECK</h1>
<h3>ERMESINDE CLUBE KARATE</h3>
</div>
</div>
</div>
<div class="section1">Section1</div>
<div class="section2">Section2</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
And here is the css:
.wrapper{
display:grid;
width:100%;
background-color:#e3e3e3;
grid-template-rows:
[grid-start hd-start] 100vh
[hd-end sc1-start] 100vh
[sc1-end sc2-start] 100vh
[sc2-end ft-start] 125px
[ft-end grid-end];
grid-template-columns: 100%;
}
div div:hover{
border:1px solid black;
}
/*
HEADER
*/
.header{
grid-row:hd;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/black_belt_stock_photo.jpg);
}
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
}
.brand img{
border: 2px rgb(109, 12, 12) solid;
border-radius: 50%;
}
.brand h1{
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
.brand h3{
color:white;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.section1{
grid-row:sc1;
}
.section2{
grid-row:sc2;
}
.footer{
grid-row:ft;
}
This is supposed to be the big header of the page to when people open the page, animations might be added to the headers and image, but first I would like to center vertically while aligning the element to the far right.
I have tried to move around in the css with somethings like:
- position:absolute;
- vertically-align:center;
- justify-content:right; align-content:center;
But none of these worked for me, so please could someone help me?
Thank you.
This might work for you:
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
position: absolute;
right: 2rem;
top: 50%;
margin-top: -160px; /* 1/2 image height */
}
Basically i am trying to create a side panel placed on the right that works in both ie11 and chrome when hovering on top of it, it opens and when coming out it closes.So this is the code works well in chrome but not in ie11. In ie11 it spreads through the bottom half of the view i would like it to cover part of the middle and to be perfectly positioned in the middle. Any help would be much appreciated. I figured out that the problem is in the css transform:translateY tried -ms-transform -webkit-transform nothing is working. .Here is the code:
<html>
<head><title>Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<body>
<div id="panel">
<div id="panel-content">
</div>
</div>
</body>
</html>
<script>
$(function () {
//Function to show side panel on hover
var $pCont = $("#panel-content");
$pCont.width(0);
$('#panel').mouseenter(function(){
$pCont.stop().animate({width: 27}, 200);
});
//Animation for closing the sidepanel when mouseleave
$('#panel').mouseleave(function(){
$("#panel-collapse").hide("slide", { direction: "right" }, 300,function(){
$pCont.stop().animate({width: 0}, 200);
});
});
});
</script>
<style>
#panel
{
position: fixed;
right: 0;
height:180px;
width:27px;
margin-top: 50vh;
transform: translateY(-50%);
}
#panel-content
{
border-radius: 10px 0px 0px 10px;
position: fixed;
right: 0;
background: black;
height:100%;
}
</style>
It happens cause you put position: fixed in #panel-content so in the ie11 the page is going to be his parent, height: 100% would be the height of the page not the #panel's height
You don't need to use javascript to do this hover, you can do that with this code
here is a fiddle
HTML
<html>
<head><title>Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<body>
<div id="panel">
<div id="panel-content">
</div>
</div>
</body>
</html>
CSS
body
{
overflow-x: hidden;
}
#panel
{
position: fixed;
right: 0;
height:180px;
width:27px;
margin-top: 50vh;
transform: translateY(-50%);
}
#panel-content
{
border-radius: 10px 0px 0px 10px;
left: 100%;
position: absolute;
background: black;
height:100%;
width: 100%
transition: .2s;
}
#panel:hover #panel-content{
left: 0;
}
Use % layout responsive
HTML Source
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
<!-- Top -->
<div id="top"> TOP</div>
<!-- Menu MID LEFT -->
<div id="midleft"> Menu Meio Esquerda</div>
<!--MID-->
<div id="mid"> BANNER</div>
<!-- Back -->
<div id="back"> RordaPé </div>
</body>
</html>
CSS Soruce
html, body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
margin:0; height: 100%;
}
#top{
background-color: #bfb;
position: relative;
width: 100%;
height:18%
}
#midleft
{
background-color: #ddd;
position: relative;
width: 12%;
height: 65%;
padding: 1%;
padding-right: 2%;
}
#mid{
background-color: #ff9;
float: right;
width: 75%;
height: 35%
}
#back{
background-color: #bfb;
width: 100%;
height: 7%;
clear:both;
}
I need to make my layout like this!
I'm not able to do this Responsive Layout Mode.
Could someone send me link explaining Position BOX in CSS3?
Or should do another layout mode without BOX CSS?
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>
I had a problem with border-radius in webkit browsers and found the solution at the following URL:
How to make CSS3 rounded corners hide overflow in Chrome/Opera
but iam using a another element with position: absolute; inside this
now I need to make the caption with rounded border too, but do not know how
note: i can't use another border-radius in caption, because this will have an animation
see the code with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Problem</title>
<style type="text/css">
img {
border: 0;
}
a {
text-decoration: none;
}
.wrap-events {
float: left;
position: relative;
width: 500px;
height: 250px;
}
.events {
overflow: hidden;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.caption {
position: absolute;
width: 100%;
bottom: 0;
color: #FFFFFF;
background-color: #151515;
font: 12px "Arial", Helvetica, sans-serif;
opacity: 0.6;
border-radius: 0 0 50px 50px; /* add border-radius to caption */
}
.caption p {
padding: 10px;
}
</style>
</head>
<body>
<div class="wrap-events">
<div class="events">
<a href="#">
<img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image">
</a>
<div class="caption">
<p>This is a caption</p>
</div>
</div>
</div>
<button id="slide">Slide It!</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$('#slide').click(function(){
$('.caption').hide().slideDown(2000);
});
</script>
</body>
</html>
cheers
That is a problem for now I think. May I suggest you use fadeIn() Instead. See a demo