Having issues displaying SCSS correctly - html

Good Evening all, I am trying to re-create a login page for my project, I am going to have roughly 20 html page's and I am trying attach all of my html files to the one CSS file. In order to do that I know I have to assign the parameters of my css elements so that they are only assigned to a singular page. In this case, I am trying to assign these SCSS elements only to my login page. However, the right side of my page is not displaying as it should. I have searched everywhere, and I am not sure of what I am doing wrong. Can anyone more experienced give me an idea of how I could handle this differently to get the intended result? Thanks in advance!
<!DOCTYPE>
<HTML>
<head>
<meta charset="utf-8">
<title>blank title</title>
</head>
<body class = loginPage>
<div class="container">
<div class="left">
<div class="header">
<h2 class="animation a1">Welcome Back</h2>
<h4 class="animation a2">Log in to your account using email and password</h4>
</div>
<div class="form">
<input type="email" class="form-field animation a3" placeholder="Email Address">
<input type="password" class="form-field animation a4" placeholder="Password">
<p class="animation a5">Forgot Password</p>
<button class="animation a6">LOGIN</button>
</div>
</div>
</div>
<div class="right"></div>
</body>
</HTML>
* { box-sizing: border-box; }
#import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');
.loginPage .body {
font-family: 'Rubik', sans-serif;
}
.loginpage .container {
display: flex;
height: 100vh;
}
.loginpage .left {
overflow: hidden;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
animation-name: left;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1s;
}
.right {
flex: 1;
background-color: black;
transition: 1s;
background-image: url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.loginPage .header > h2 {
margin: 0;
color: #4f46a5;
}
.loginPage .header > h4 {
margin-top: 10px;
font-weight: normal;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
}
.loginPage .form {
max-width: 80%;
display: flex;
flex-direction: column;
}
.loginPage .form > p {
text-align: right;
}
.loginPage .form > p > a {
color: #000;
font-size: 14px;
}
.loginPage .form-field {
height: 46px;
padding: 0 16px;
border: 2px solid #ddd;
border-radius: 4px;
font-family: 'Rubik', sans-serif;
outline: 0;
transition: 0.2s;
margin-top: 20px;
}
.loginPage .form-field:focus {
border-color: #0f7ef1;
}
.loginPage .form > button {
padding: 12px 10px;
border: 0;
background: linear-gradient(to right, #de48b5 0%, #0097ff 100%);
border-radius: 3px;
margin-top: 10px;
color: #fff;
letter-spacing: 1px;
font-family: 'Rubik', sans-serif;
}
.loginPage .animation {
animation-name: move;
animation-duration: 0.4s;
animation-fill-mode: both;
animation-delay: 2s;
}
.loginPage .a1 {
animation-delay: 2s;
}
.loginPage .a2 {
animation-delay: 2.1s;
}
.loginPage .a3 {
animation-delay: 2.2s;
}
.loginPage .a4 {
animation-delay: 2.3s;
}
.loginPage .a5 {
animation-delay: 2.4s;
}
.loginPage .a6 {
animation-delay: 2.5s;
}
#keyframes .loginPage .move {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(-40px);
}
100% {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
#keyframes .loginPage .left {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
padding: 20px 40px;
width: 440px;
}
}
enter image description here


So I'm not sure if this was an issue with typing the code into StackOverflow or if your base code is like this but there are several issues with class names both in the HTML and CSS that are causing some errors. For example, your loginPage class name for the body is not surrounded by quotations so that will cause errors with the class names in your CSS. Also, there are several .loginPage identifiers in the CSS that are typed in as .loginpage, which again would cause errors as the CSS won't tie that with the class name in the HTML. Furthermore, .loginPage .body in your CSS won't do anything as the body is an element tag, not a class name. Since this is the main part of your code, I would just recommend changing that to .loginPage. After the changes were made to those typos, your page started looking more like what you provided.
Next, I started off by changing the .loginPage CSS section to be display: flex so that I could make some flexbox style layout. I changed the .loginPage .container section to be display: inline-flex with height: 100vh to cover the entire viewport and prevent the child elements from being block level and taking up the entire width of the page, which would push your picture down below the container. I then set height: 100vh for the .right element to again take up the entire viewport, set width: 80% to bring both the .container and the .right elements on the same line, and combined your separate background css into one for simplification.
There are some other modifications I made for appearance, such as margin on the .loginPage .container and flex specifications on that one as well as the .right element. Below is the final code. When using this code in your project, I would recommend playing around with the margins and flex specification though just to make sure it works across various screen sizes. I hope this answers your question!
<body class="loginPage">
<div class="container">
<div class="left">
<div class="header">
<h2 class="animation a1">Welcome Back</h2>
<h4 class="animation a2">Log in to your account using email and password</h4>
</div>
<div class="form">
<input type="email" class="form-field animation a3" placeholder="Email Address">
<input type="password" class="form-field animation a4" placeholder="Password">
<p class="animation a5">Forgot Password</p>
<button class="animation a6">LOGIN</button>
</div>
</div>
</div>
<div class="right"></div>
</body>
CSS:
* { box-sizing: border-box; }
#import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');
.loginPage {
font-family: 'Rubik', sans-serif;
display: flex;
}
.loginPage .container {
display: inline-flex;
height: 100vh;
flex: 1 1 auto;
margin: 2rem;
}
.loginPage .left {
overflow: hidden;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
animation-name: left;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1s;
}
.right {
flex: 1 1 auto;
height: 100vh;
width: 80%;
display: inline-flex;
transition: 1s;
background: center / cover no-repeat url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80);
}
.loginPage .header > h2 {
margin: 0;
color: #4f46a5;
}
.loginPage .header > h4 {
margin-top: 10px;
font-weight: normal;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
}
.loginPage .form {
max-width: 80%;
display: flex;
flex-direction: column;
}
.loginPage .form > p {
text-align: right;
}
.loginPage .form > p > a {
color: #000;
font-size: 14px;
}
.loginPage .form-field {
height: 46px;
padding: 0 16px;
border: 2px solid #ddd;
border-radius: 4px;
font-family: 'Rubik', sans-serif;
outline: 0;
transition: 0.2s;
margin-top: 20px;
}
.loginPage .form-field:focus {
border-color: #0f7ef1;
}
.loginPage .form > button {
padding: 12px 10px;
border: 0;
background: linear-gradient(to right, #de48b5 0%, #0097ff 100%);
border-radius: 3px;
margin-top: 10px;
color: #fff;
letter-spacing: 1px;
font-family: 'Rubik', sans-serif;
}
.loginPage .animation {
animation-name: move;
animation-duration: 0.4s;
animation-fill-mode: both;
animation-delay: 2s;
}
.loginPage .a1 {
animation-delay: 2s;
}
.loginPage .a2 {
animation-delay: 2.1s;
}
.loginPage .a3 {
animation-delay: 2.2s;
}
.loginPage .a4 {
animation-delay: 2.3s;
}
.loginPage .a5 {
animation-delay: 2.4s;
}
.loginPage .a6 {
animation-delay: 2.5s;
}
#keyframes .loginPage .move {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(-40px);
}
100% {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
#keyframes .loginPage .left {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
padding: 20px 40px;
width: 440px;
}
}


Giving your #keyframes the proper animation name you used seemed to compile well
https://jsfiddle.net/oeat97m2/
* { box-sizing: border-box; }
#import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');
.loginPage .body {
font-family: 'Rubik', sans-serif;
}
.loginpage .container {
display: flex;
height: 100vh;
}
.loginpage .left {
overflow: hidden;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
animation-name: left;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1s;
}
.right {
flex: 1;
background-color: black;
transition: 1s;
background-image: url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.loginPage .header > h2 {
margin: 0;
color: #4f46a5;
}
.loginPage .header > h4 {
margin-top: 10px;
font-weight: normal;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
}
.loginPage .form {
max-width: 80%;
display: flex;
flex-direction: column;
}
.loginPage .form > p {
text-align: right;
}
.loginPage .form > p > a {
color: #000;
font-size: 14px;
}
.loginPage .form-field {
height: 46px;
padding: 0 16px;
border: 2px solid #ddd;
border-radius: 4px;
font-family: 'Rubik', sans-serif;
outline: 0;
transition: 0.2s;
margin-top: 20px;
}
.loginPage .form-field:focus {
border-color: #0f7ef1;
}
.loginPage .form > button {
padding: 12px 10px;
border: 0;
background: linear-gradient(to right, #de48b5 0%, #0097ff 100%);
border-radius: 3px;
margin-top: 10px;
color: #fff;
letter-spacing: 1px;
font-family: 'Rubik', sans-serif;
}
.loginPage .animation {
animation-name: move;
animation-duration: 0.4s;
animation-fill-mode: both;
animation-delay: 2s;
}
.loginPage .a1 {
animation-delay: 2s;
}
.loginPage .a2 {
animation-delay: 2.1s;
}
.loginPage .a3 {
animation-delay: 2.2s;
}
.loginPage .a4 {
animation-delay: 2.3s;
}
.loginPage .a5 {
animation-delay: 2.4s;
}
.loginPage .a6 {
animation-delay: 2.5s;
}
#keyframes move {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(-40px);
}
100% {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
#keyframes left {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
padding: 20px 40px;
width: 440px;
}
}

Related

How to make css animations work one by one

I am studying CSS animation. I want my animation moving one by one, as I don't know JS I want to do it by CSS only. How can I do this? I faced the problem of rules from and to in animations, when I change them the animations don't work as expected.
I have the following HTML
body {
margin: 0;
background: grey;
}
main {
font-family: Open Sans;
text-transform: uppercase;
line-height: 1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.animation {
width: 20em;
height: 4em;
margin: 1em auto;
position: relative;
}
.squares {
margin: auto;
background: red;
/* display: flex;
flex-wrap: wrap;
justify-content: center;*/
}
.small_square {
width: 10px;
height: 10px;
background-color: white;
text-align: center;
display: block;
text-align: center;
position: relative;
margin: 0;
padding: 0;
left: 48%;
animation: appearance_small 1s ease-in-out;
animation: move_around 3s ease-in-out;
*/
}
.big_square {
margin: auto;
width: 40px;
height: 40px;
background-color: black;
display: block;
position: relative;
top: 30px;
animation: appearance_big 1.3s ease-in-out;
animation-delay: 2s;
animation: spin 3s ease-in-out;
forwards;
}
#keyframes appearance_big {
0% {
transform: scale(0%);
}
100% {
opacity: 1;
}
}
#keyframes appearance_small {
0% {
opacity: 0;
transform: scale(0%);
top: 50px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes move_around {
from {
transform: translate(50%, 50px) rotate(0turn) translate(-50%, -50px);
}
to {
transform: translate(50%, 50px) rotate(0.50turn) translate(-0%, -50px);
}
<main>
<div id="animation" class="animation">
<div class="squares">
<div class="small_square"></div>
<div class="big_square"></div>
</div>
</main>

How do I Change font-color in CSS animation using CSS animation

I am trying to make it so when I open the page, test will show up as red and the testing will show up as white. There is a delay that I am using for when the page opens that I want to keep (if you run the program you will see).
Css
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
HTML
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>

Do you mean like this? See changes under /* added CSS */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: grey;
}
html {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
/* added CSS */
.red {
animation: text_reveal_red ease forwards;
animation-delay: 1s;
animation-iteration-count: 1;
}
#keyframes text_reveal_red {
100% {
color: crimson;
}
}
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>

how do i make a button fade in with css keyframes?

I'm trying to make my button fade in with keyframes but it isn't working and I know I'm doing something wrong. I ended up getting the animated text to work but this is giving me a headache and I cannot find info anywhere that has helped me... I'm new to web development so don't be too harsh on me or my (probably ugly and unorganized) code lol. I'm trying to learn as much as I can, so if you can please explain why it isn't working and why something else might? Thanks guys <3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<title>Welcome! | Video Editing by Scottis</title>
</head>
<body>
<!-- Header -->
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<!-- Buttons -->
<style>
.btn {
background-color: white;
color: rgb(133, 4, 255);
text-align: center;
font-size: 15px;
font-weight: bold;
margin-right: -250px;
margin-top: 600px;
margin-left: 515px;
padding: 30px;
}
</style>
</head>
<body>
<button class="btn">Portfolio</button>
<button class = "btn">Pricing</button>
<button class="btn">Contact</button>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span{
color: white;
text-transform: uppercase;
display: block;
}
.text1{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0%{
margin-bottom: -20%;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
#keyframes button {
0%{
opacity: 0%;
}
0%{
opacity: 0%;
}
25%{
opacity: 25%;
}
50%{
opacity: 50%;
}
75%{
opacity: 75%;
}
100%{
opacity: 100%;
}
}

You have some issues with your code first off. You are repeating both the head and body tags out of proper valid html sequence. Have a close look at the following page and resource from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
As to your issue with keyframes, define the class you wish to control with the sequence in your css and add the animation with a unique call name, I used fadeIn. Below I have added Mozilla, webkit, opera and ms #keyframe animations for opacity. I am defining the animation to start the timer (3 seconds) #keyframe 0% { opacity: 0; } , then end at 100% { opacity: 1; }. I add multiple kits for different browsers.
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Start class for buttons animation fadeIn ease */
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* End of animation keyframes */
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
color: white;
text-transform: uppercase;
display: block;
}
.text1 {
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0% {
margin-bottom: -20%;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<button class="btn">Portfolio</button>
<button class="btn">Pricing</button>
<button class="btn">Contact</button>

Mouse over on button, another div or HTML tag will side out to the left of the button

Hi I have a problem trying to getting the animation at the left hand side of the button when user mouse over the button. One of the example that explain as below:
HTML:
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
CSS:
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
position: relative; z-index:1;
transition: all 250ms ease;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
margin-right: 0;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
0% { margin-top: 0; }
15% { margin-top: 0; transform: rotateX(-50deg); }
30% { margin-top: 0; transform: rotateX(50deg); }
45% { margin-top: 0; transform: rotateX(-30deg); }
60% { margin-top: 0; transform: rotateX(30deg); }
75% { margin-top: 0; transform: rotateX(-30deg); }
100% { margin-top: 0; transform: rotateX(0deg);}
}
https://jsfiddle.net/9dwk8vzg/
Original link:http://dabblet.com/gist/5559193
But for this example is at the bottom instated of at the left hand side of the button, I tried using margin-right and padding-left still unable to get the mouse over appeal div tag to be on the right hand side, may I know what do I miss to get the div tag to appeal on the right hand side/

/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
width: 100%;
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
width: 100%;
background: #00aced;
padding: 15px;
display: block;
position:absolute;
color: #fff;
text-decoration: none;
z-index:1;
transition: all 250ms ease;
right: -30px;
top: 0;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
right: 100%;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
15% { width: 95%; }
30% { width: 105%; }
45% { width: 97%; }
60% { width: 103%; }
75% { width: 97%; }
100% { width: 100%; }
}
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
</div>

Div with Upward Scroll fixed in Centre

Im struggling a bit with this project that I am working on. Essentially I have a chat interface built in angular, im having a problem getting the CSS styling right. At the moment the chat starts at the top, then scrolls down off the screen as the conversation grows. I can scroll with the conversation but this isnt very good UX.
I am trying to make it so the 'Send Message' box starts in the bottom third of the screen and is fixed. Then, as the conversation grows, the messages move upwards/away instead of downwards. Ideally I want this in a container that disappears (behind a header, etc).
I've been trying to wrap my brain around this for the past few days with not much luck. CSS isnt really a strong point of mine. Any help would be greatly appreciated
CSS & Image of current setup below (there is also a separate styling sheet but this is only for the button/message stylings:
<body><style>
body { background: #FFFFFF; color: #727272; }
h1, h2, h3, h4, { background: #FFFFFF; color: #212121; } body { background: #FFFFFF; color: #727272; }
html, body, form, strong, button, small, input, p, div, h1, h2, h3, h4
{ outline: 0; margin: 0; padding: 0; border: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.4em; font-size: 100%; } !important;
a, a:active
{ color: #F8F8F8; text-decoration: none; }
a:hover { text-decoration: underline; }
button,
a { cursor: pointer; } strong { font-weight: 500; }
p, h1, h2, h3, h4 { margin-top: 1em; margin-bottom: 1em; }
h1, h2, h3, h4 { font-weight: 200; font-size: 32px; }
html, body, p, div { font-weight: 200; font-size: 17px; } .clear { clear: both }
.container { padding-right: 7vw; padding-left: 7vw; margin-right: auto; margin-left: auto; height: 100vh; }
</style><style>
/* .header { overflow: hidden; position: relative; min-height: 100vh; padding-bottom: 0vh; text-align: center; color: #F8F8F8; background: linear-gradient( to left, rgba(122,214,184,0.0) 0%, rgba(122,214,184,0.7) 100% ), linear-gradient( to bottom, rgb(60,240,80) 0%, rgb(122,214,184) 100% ); } */
.header { overflow: hidden; position: relative; min-height: 100vh; padding-bottom: 0vh; text-align: center; color: #F8F8F8; background: linear-gradient( to left, rgba(204,52,148,0.0) 0%, rgba(239,45,86,0.7) 100% ), linear-gradient( to bottom, rgb(204,52,148) 0%, rgb(204,52,148) 100% ); }
input::-webkit-input-placeholder { color: rgba(200,255,255,0.5) !important; } .header .signup { margin-top: 4em; } .header
input { background: transparent; color: #F8F8F8; border: 0; border-bottom: 1px solid rgba(255,255,255,0.8); line-height: 2em; font-size: 1.4em; text-align: center; width: 12em; }
/* .angularjs-chat-bubble-white { position: absolute; display: inline-block; background: transparent url(https://i.imgur.com/3Sdc2xD.png); background-size: 100%; background-repeat: no-repeat; } */
.bothello-bubble { position: absolute; display: inline-block; background: transparent url(https://i.imgur.com/kN9kf2o.png); background-size: 100%; background-repeat: no-repeat; }
.header .bubble-one { top: 15vh; left: 10vw; width: 30px; height: 30px; opacity: 0.1; transform-origin: 70% 400%; animation: bubble-move 3s ease-in-out 0s infinite alternate; }
.header .bubble-two { top: 44vh; left: 6vw; width: 100px; height: 100px; opacity: 0.1; transform-origin: 60% 400%; animation: bubble-move 4s ease-in-out 0s infinite alternate; }
.header .bubble-three { top: 75vh; left: 22vw; width: 20px; height: 20px; opacity: 0.2; transform-origin: 30% 120%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-four { top: 14vh; left: 28vw; width: 15px; height: 15px; opacity: 0.1; transform-origin: 20% 400%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-five { top: 30vh; left: 66vw; width: 14px; height: 14px; opacity: 0.2; transform-origin: 90% 100%; animation: bubble-move 5s ease-in-out 0s infinite alternate; }
.header .bubble-six { top: 8vh; left: 75vw; width: 23px; height: 23px; opacity: 0.2; transform-origin: 80% 200%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-seven { top: 33vh; left: 84vw; width: 120px; height: 120px; opacity: 0.2; transform-origin: 100% 90%; animation: bubble-move 6s ease-in-out 0s infinite alternate; }
.header .bubble-eight { top: 72vh; left: 85vw; width: 360px; height: 360px; opacity: 0.2; transform-origin: -100% 100%; animation: bubble-move 7s ease-in-out 0s infinite alternate; }
/* .messagebox { padding-top: 90vh; position: fixed;} */
#keyframes bubble-move { 0% { opacity: 0.6; transform: scale(1.0) rotate(-8deg) translate(-1px,-2px); } 70% { opacity: 0.3; transform: scale(1.04) rotate(10deg) translate(2px,1px); } 100% { opacity: 0.4;
transform: scale(0.94) rotate(-18deg) translate(-3px,-1px); } }
</style>
<div class="header">
<!-- <div class="container"> -->
<div class="bothello-bubble bubble-one"></div>
<div class="bothello-bubble bubble-two"></div>
<div class="bothello-bubble bubble-three"></div>
<div class="bothello-bubble bubble-four"></div>
<div class="bothello-bubble bubble-five"></div>
<div class="bothello-bubble bubble-six"></div>
<div class="bothello-bubble bubble-seven"></div>
<div class="bothello-bubble bubble-eight"></div>
<div class="container">
<ng-container *ngFor="let message of messages | async">
<div class="message" [ngClass]="{ 'from': message.sentBy === 'bot',
'to': message.sentBy === 'user' }">
{{ message.content }}
</div>
</ng-container>
<div class="messagebox">
<label for="nameField">Your Message</label>
<input [(ngModel)]="formValue" (keyup.enter)="sendMessage()" type="text">
<button (click)="sendMessage()">Send</button>
</div>
<!-- </div> -->
</div>
</div>
</body>
Thanks so much.
Jay

You're looking for:
.container {
display: flex;
flex-direction: column;
}
.container>ng-container {
flex-grow: 1;
overflow: auto;
}
.container>.messagebox {
flex-shrink: 0;
margin-bottom: 3px;
}
You'll also need a small function to scroll <ng-container> to bottom whenever a message gets added to chat, something along these lines:
function scrollToBottom() {
let elem = document.querySelector('ng-container');
elem.scrollTop = elem.scrollHeight;
}
I don't know for sure what are best practices for manipulating DOM nodes in Angular2 (and above) and if there are any favored techniques over .querySelector.
Also note .querySelector can (and should) be used on any DOM node, so you probably want to use it on your ViewContainer rather than on the entire document.
But, since you haven't posted anything related to the JS part, I can't help you more there.