WHY my animated text are not coming on one line

WHY my animated text are not coming on one line - html

The output above the button which is text inclosed in brackets the problem is its a moving word but it's not getting placed in proper position insted it's going up and down.
I have used animated button which works fine bu the text in the brackets is scrolling as per the
need. Though i've tried a lot but not geting the desired answer
.background {
background-color: darkorange;
width: 100%;
height: 100%;
position: absolute;
}
.first{
color: orange;
text-align: center;
position: fixed;
left: 0%;
right: 0%;
z-index: 9999;
margin-left: 40px;
margin-right: 20px;
margin-top: 250px;
}
<!-- for button patrs css code -->
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<!-- For body parts css codes -->
.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-family: 'Lato', sans-serif;
font-size: 35px;
line-height: 40px;
color: #ecf0f1;
}
.content__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.content__container:before {
content: '[';
left: 0;
}
.content__container:after {
content: ']';
position: absolute;
right: 0;
}
.content__container:after, .content__container:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
line-height: 40px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.content__container__text {
display: inline;
float: left;
margin: 0;
}
.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.content__container__list__item {
line-height: 40px;
margin: 0;
}
#-webkit-keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes change {
0%, 12.66%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16.66%, 29.32% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
33.32%,45.98% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
49.98%,62.64% {
-webkit-transform: translate3d(0, -75%, 0);
transform: translate3d(0, -75%, 0);
}
66.64%,79.3% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
83.3%,95.96% {
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
}
#keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes change {
0%, 12.66%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16.66%, 29.32% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
33.32%,45.98% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
49.98%,62.64% {
-webkit-transform: translate3d(0, -60%, 0);
transform: translate3d(0, -60%, 0);
}
66.64%,79.3% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -40%, 0);
}
83.3%,95.96% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -20%, 0);
}
}
<html>
<link rel="stylesheet" href="stylesheet.css">
<div class="background"></div>
<body>
<div class="content">
<div class="content__container">
<div class="content__container">
<p class="content__container__text">
Hello
</p>
<ul class="content__container__list">
<li class="content__container__list__item">world !</li>
<li class="content__container__list__item">users !</li>
<li class="content__container__list__item">everybody !</li>
</ul>
</div>
</div>
<button class="button"><span>Login</span></button>
<button class="button"><span>Register</span></button>
</div>
</body>
</html>
<!-- end snippet -->

I think you want something like this :
.background {
background-color: darkorange;
width: 100%;
height: 100%;
position: absolute;
}
.first{
color: orange;
text-align: center;
position: fixed;
left: 0%;
right: 0%;
z-index: 9999;
margin-left: 40px;
margin-right: 20px;
margin-top: 250px;
}
<!-- for button patrs css code -->
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<!-- For body parts css codes -->
.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-family: 'Lato', sans-serif;
font-size: 35px;
line-height: 40px;
color: #ecf0f1;
}
.content__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.content__container:before {
content: '[';
left: 0;
}
.content__container:after {
content: ']';
position: absolute;
right: 0;
}
.content__container:after, .content__container:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
line-height: 40px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.content__container__text {
display: inline;
float: left;
margin: 0;
}
.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.content__container__list__item {
line-height: 40px;
margin: 0;
}
#-webkit-keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes change {
0%,15%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 40% {
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
50%,65% {
-webkit-transform: translate3d(0, -63%, 0);
transform: translate3d(0, -63%, 0);
}
75%,90% {
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes change {
0%,15%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 40% {
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
50%,65% {
-webkit-transform: translate3d(0, -63%, 0);
transform: translate3d(0, -63%, 0);
}
75%,90% {
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<div class="background"></div>
<body>
<div class="content">
<div class="content__container">
<div class="content__container">
<p class="content__container__text">
Hello
</p>
<ul class="content__container__list">
<li class="content__container__list__item">world !</li>
<li class="content__container__list__item">users !</li>
<li class="content__container__list__item">everybody !</li>
</ul>
</div>
</div>
<button class="button"><span>Login</span></button>
<button class="button"><span>Register</span></button>
</div>

Related

Trigger css animation only when it tis visible into the viewport

So,here i have a text animation on my page.The problem is that the animation is triggered only when the full page is loaded!so,I have this animation on the middle of my page it is almost impossible to see that it is a animated text! NEED SOLUTION please!
HTML CODE:
<div class="animated-title" id="anime" >
<div class="text-top">
<div>
<span>So! What Are You </span>
<span>Waiting For?</span>
</div>
</div>
<div class="text-bottom">
<div>Just click And LEARN!</div>
</div>
</div>
CSS CODE:
.animated-title {
color: #222;
font-family: Roboto, Arial, sans-serif;
height: 90vmin;
left: 30%;
position: absolute;
top: 156%;
transform: translate(-50%, -50%);
width: 90vmin;
}
.animated-title > div {
height: 50%;
overflow: hidden;
position: absolute;
width: 100%;
}
.animated-title > div div {
font-size: 9vmin;
padding: 3vmin 0;
position: absolute;
}
.animated-title > div div span {
display: block;
}
.animated-title > div.text-top {
border-bottom: 1.4vmin solid rgb(13, 231, 13);
top: 0;
border-radius: 20px;
}
.animated-title > div.text-top div {
animation: showTopText 1s;
animation-delay: 7s;
animation-fill-mode: forwards;
bottom: 0;
transform: translate(0, 100%);
}
.animated-title > div.text-top div span:first-child {
color: #767676;
}
.animated-title > div.text-bottom {
bottom: 0;
}
.animated-title > div.text-bottom div {
animation: showBottomText 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
top: 0;
transform: translate(0, -100%);
}
Key frames:
0% { transform: translate3d(0, 100%, 0); }
40%, 60% { transform: translate3d(0, 50%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
#keyframes showBottomText {
0% { transform: translate3d(0, -100%, 0); }
100% { transform: translate3d(0, 0, 0); }
}

I think I understand what your problem is.
As long as you do not have a problem with including a library in your code, you can do it this way:
https://www.youtube.com/watch?v=XtjO-OWFyfU
By the way, there are many tutorials on internet. You just need to search.

Ripple effect not working on non-chrome browers

I'm trying to set up a ripple effect when a button is clicked.
I have done so successfully, however it is only working in Google Chrome's browser and I'm not sure why. The effect does not show up in Safari or FireFox (have not tested IE).
Demo:
https://jsfiddle.net/uwa67xff/5/
HTML:
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
CSS:
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
* { box-sizing:border-box; }

In your CSS code there is some properties that have no working standard and may never become standard(transform, #keyframes). To overcome this we use Vendor Prefixes(-webkit, -moz).
To know more go here
With vendor prefixes code
* { box-sizing:border-box; }
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
-webkit-transform: scale(1, 1) translate(-50%);
-moz-transform: scale(1, 1) translate(-50%);
-ms-transform: scale(1, 1) translate(-50%);
-o-transform: scale(1, 1) translate(-50%);
transform: scale(1, 1) translate(-50%);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 1;
}
20% {
-webkit-transform: scale(25, 25);
-moz-transform: scale(25, 25);
-ms-transform: scale(25, 25);
-o-transform: scale(25, 25);
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(40, 40);
-moz-transform: scale(40, 40);
-ms-transform: scale(40, 40);
-o-transform: scale(40, 40);
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
-webkit-animation: ripple 1s ease-out;
-moz-animation: ripple 1s ease-out;
-o-animation: ripple 1s ease-out;
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
what prefixes are needed for a newer CSS property. go here

You need to add -webkit- for safari and chrome, -moz- for mozila and -o- for opera browser
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-webkit-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-moz-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-o-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
* { box-sizing:border-box; }
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>

Text area not editable/Unable to type text in text area

I am new to web development.
I have a web application written in nodejs-html-css-js.
I have a text area, but I am unable to type or insert anything. It is embedded to a slide pop up. Here is the code.
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->
In the above snippet, I am able to get the text area but I am not able to edit it.
However, if I insert a new CSS snippet, nothing is visible. Here is that snippet.
*::after, *::before {
content: '';
}
a {
color: #89ba2c;
text-decoration: none;
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
}
.cd-panel::after {
/* overlay layer */
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*background: transparent;*/
/*cursor: pointer;*/
/*-webkit-transition: background 0.3s 0.3s;*/
/*-moz-transition: background 0.3s 0.3s;*/
/*transition: background 0.3s 0.3s;*/
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
/*background: #00bdff;*/
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
The problem is, I will be needing both CSS snippets for reaching my goal.
Logic: I click a button, a slide pop up reveals with a text area. I want to type the text and the post gets saved in a calendar event.
However, I am not getting any results if I include the above attached code.
Any suggestions or solutions is greatly appreciated.

You can add position and z-index properties to the textarea to ensure they stack above .cd-panel-content
.cd-panel-container h1 {
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content: ' ';
width: 120px;
display: block;
border: 1.5px solid #00DED4;
border-radius: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before,
.cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before,
.no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-panel-textarea {
/* add this */
position: relative;
z-index: 100;
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div>
<!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div>
<!--cd-panel-textarea-->
</div>
<!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div>
<!-- cd-panel -->

Issue because you added .cd-panel-content with absolute position without z-index.. set z-index:- 1 for that
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
z-index: -1;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->

**you can make your text area editable by removing Width and height which you have set to 100% in cd-panel-content class **
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->

radio button and label

I'm not that much experienced in HTML and I wanted to use a designed radio Button.
So, I used these codes from a website and modified it a little bit.
The problem now is whenever I write a sentence in the label it is not appearing in the same line.
Do you have any idea why is that happening ?
Here are the codes
html {
font-family: "Segoe UI";
}
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
font-family: 'Raleway', Arial, sans-serif;
}
.toggle-button {
position: relative;
display: inline-block;
color: black;
margin: 0 20px;
}
/*tested*/
.toggle-button label {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
text-align: left;
}
/*tested*/
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
/*to let radio button invites clicking*/
.toggle-button__icon:before, .toggle-button__icon:after {
content: "";
position: absolute;
transition: 0.200s ease-out;
}
/*to make radio button clickable*/
.toggle-button--maa label {
width: 110px; /*space between the options*/
height: 20px;
line-height: 20px; /*line spacing*/
transition: all 0.2s;
}
.toggle-button--maa label:before, .toggle-button--maa label:after {
position: absolute;
top: 0;
left: 30px;
width: 110px;
transition: all 0.2s .1s ease-out;
}
.toggle-button--maa label:before {
content: attr(data-text);
}
.toggle-button--maa input:checked ~ .toggle-button__icon:before {
animation: wave .7s ease-out;
}
.toggle-button--maa input:checked ~ .toggle-button__icon:after {
transform: scale(1);
animation: zoomIn .2s;
}
.toggle-button--maa .toggle-button__icon {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--maa .toggle-button__icon:before, .toggle-button--maa .toggle-button__icon:after {
border-radius: 50%;
}
.toggle-button--maa .toggle-button__icon:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.toggle-button--maa .toggle-button__icon:after {
top: 4px;
left: 4px;
width: 60%;
height: 60%;
background: #61B136;
animation: zoomOut .2s ease-out;
transform: scale(0);
transition: none;
}
.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {
animation: hover .2s;
}
.toggle-button--maa:hover input:not(:checked) ~ label:before {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes wave {
0% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
#keyframes zoomFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes zoomFadeIn {
0% {
opacity: 0;
transform: scale(3);
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
<div id="ButtonsDiv" class="auto-style4" >
<div class="toggle-button toggle-button--maa">
<input id="toggleButton7" name="radio3" type="radio"/>
<label for="toggleButton7" data-text="Bachelor accounting student" ></label>
<div class="toggle-button__icon"></div>
</div>
<div class="toggle-button toggle-button--maa">
<input id="toggleButton8" name="radio3" type="radio"/>
<label for="toggleButton8" data-text="Bachelor finance student" class="auto-style5"></label>
<div class="toggle-button__icon"></div>
</div>
</div>

The problem is that you set the label and the :before fixed width. Also, you set position:absolute to the :before element.
html {
font-family: "Segoe UI";
}
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
font-family: 'Raleway', Arial, sans-serif;
}
.toggle-button {
position: relative;
display: inline-block;
color: black;
margin: 0 20px;
}
/*tested*/
.toggle-button label {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
text-align: left;
}
/*tested*/
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
/*to let radio button invites clicking*/
.toggle-button__icon:before, .toggle-button__icon:after {
content: "";
position: absolute;
transition: 0.200s ease-out;
}
/*to make radio button clickable*/
.toggle-button--maa label {
height: 20px;
line-height: 20px; /*line spacing*/
transition: all 0.2s;
}
.toggle-button--maa label:before, .toggle-button--maa label:after {
margin-left:25px;
transition: all 0.2s .1s ease-out;
}
.toggle-button--maa label:before {
content: attr(data-text);
}
.toggle-button--maa input:checked ~ .toggle-button__icon:before,
.toggle-button--maa:hover input ~ .toggle-button__icon:before{
animation: wave .7s ease-out;
}
.toggle-button--maa input:checked ~ .toggle-button__icon:after,
.toggle-button--maa:hover input ~ .toggle-button__icon:after {
transform: scale(1);
animation: zoomIn .2s;
}
.toggle-button--maa .toggle-button__icon {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--maa .toggle-button__icon:before, .toggle-button--maa .toggle-button__icon:after {
border-radius: 50%;
}
.toggle-button--maa .toggle-button__icon:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.toggle-button--maa .toggle-button__icon:after {
top: 4px;
left: 4px;
width: 60%;
height: 60%;
background: #61B136;
animation: zoomOut .2s ease-out;
transform: scale(0);
transition: none;
}
/*.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon:after {
background:#CACACA;
transform: scale(1);
animation: zoomIn .2s;
}*/
/*.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {
animation: hover .2s;
}*/
.toggle-button--maa:hover input:not(:checked) ~ label:before {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes wave {
0% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
#keyframes zoomFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes zoomFadeIn {
0% {
opacity: 0;
transform: scale(3);
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
<div id="ButtonsDiv" class="auto-style4" >
<div class="toggle-button toggle-button--maa">
<input id="toggleButton7" name="radio3" type="radio"/>
<label for="toggleButton7" data-text="Bachelor accounting student" ></label>
<div class="toggle-button__icon"></div>
</div>
<div class="toggle-button toggle-button--maa">
<input id="toggleButton8" name="radio3" type="radio"/>
<label for="toggleButton8" data-text="Bachelor finance student" class="auto-style5"></label>
<div class="toggle-button__icon"></div>
</div>
</div>

How do I change container height to match image height?

I've been using Foundaiton Orbit image slider and found it great. Now I am having trouble with the height.
I have some images in the gallery that are considerably 'taller' than others and therefore the container that contains the gallery is set to the height of the 'tallest' image. Is there anyway of changing it so the container adapts it's height according to the height of the current image that it is showing?
Click here for live example of site
here is the code:
<div class="slideshow-wrapper preloader">
<ul data-orbit data-options="animation:fade;
pause_on_hover:false;
animation_speed:500;
timer_speed: 4000;
navigation_arrows:true;
slide_number: false;
swipe: true;
bullets:false;">
<li>
<img src="img/jpg/weapon-wall.jpg" alt="Armoury Tromp l'oeil">
</li>
<li>
<img src="img/jpg/vikings.jpg" alt="Vikings attacking from the sea mural">
</li>
<li>
<img src="img/jpg/chariot.jpg" alt="Ancient chariot Trompe l'oeil">
</li>
<li>
<img src="img/jpg/egypt.jpg" alt="Karen specialises in Trompe l'oeil, Egypt">
</li>
<li>
<img src="img/jpg/army.jpg" alt="army Trompe l'oeil">
</li>
</ul>
css:
.data-orbit img {
max-width: 70%;
min-height:auto;
}
/* Orbit Graceful Loading */
.orbit-container ul li { min-height: auto; overflow: hidden; }
.orbit-container ul li img { width: 100%; }
.slideshow-wrapper {
margin-top: 40px;
margin-bottom: 40px;
position: relative; }
.slideshow-wrapper ul {
list-style-type: none;
margin: 0; }
.slideshow-wrapper ul li,
.slideshow-wrapper ul li .orbit-caption {
display: none; }
.slideshow-wrapper ul li:first-child {
display: block; }
.slideshow-wrapper .orbit-container {
background-color: transparent; }
.slideshow-wrapper .orbit-container li {
display: block; }
.slideshow-wrapper .orbit-container li .orbit-caption {
display: block;}
.slideshow-wrapper .orbit-container li .orbit-caption p {
color: white;
margin-left: 45px;
font-size: 14px;
font-family: "Open Sans"; }
.slideshow-wrapper .preloader {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
border: solid 3px;
border-color: #555555 white;
border-radius: 1000px;
animation-name: rotate;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear; }
.orbit-container {
height: auto;
overflow: hidden;
width: 100%;
position: relative;
background: none; }
.orbit-container .orbit-slides-container {
list-style: none;
margin: 0;
padding: 0;
position: relative;
-webkit-transform: translateZ(0); }
.orbit-container .orbit-slides-container img {
display: block;
max-width: 60%; }
.orbit-container .orbit-slides-container.fade li {
opacity: 0;
transition: opacity 500ms ease-in-out;
-ms-transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.orbit-container .orbit-slides-container.fade li.animate-in {
opacity: 1;
z-index: 20;
transition: opacity 500ms ease-in-out; }
.orbit-container .orbit-slides-container.fade li.animate-out {
z-index: 10;
transition: opacity 500ms ease-in-out; }
.orbit-container .orbit-slides-container.swipe-next li {
-ms-transform: translate(100%, 0);
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
.orbit-container .orbit-slides-container.swipe-next li.animate-in {
-ms-transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition-duration: 500ms; }
.orbit-container .orbit-slides-container.swipe-next li.animate-out {
-ms-transform: translate(-100%, 0);
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
transition-duration: 500ms; }
.orbit-container .orbit-slides-container.swipe-prev li {
-ms-transform: translate(-100%, 0);
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
.orbit-container .orbit-slides-container.swipe-prev li.animate-in {
-ms-transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition-duration: 500ms; }
.orbit-container .orbit-slides-container.swipe-prev li.animate-out {
-ms-transform: translate(100%, 0);
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
transition-duration: 500ms; }
.orbit-container .orbit-slides-container li {
position: absolute;
top: 0;
left: 0;
width: 100%;
-ms-transform: translate(100%, 0);
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
.orbit-container .orbit-slides-container li.active {
opacity: 1;
top: 0;
left: 0;
-ms-transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.orbit-container .orbit-slides-container li .orbit-caption {
position: absolute;
bottom: 0;
background-color: rgba(51, 51, 51, 0.8);
color: white;
width: 100%;
padding: 0.625rem 0.875rem;
font-size: 0.875rem; }
.orbit-container .orbit-slide-number {
position: absolute;
top: 10px;
left: 10px;
font-size: 12px;
color: white;
background: rgba(0, 0, 0, 0);
z-index: 10; }
.orbit-container .orbit-slide-number span {
font-weight: 700;
padding: 0.3125rem; }
.orbit-container .orbit-timer {
position: absolute;
top: 12px;
right: 10px;
height: 6px;
width: 100px;
z-index: 10; }
.orbit-container .orbit-timer .orbit-progress {
height: 3px;
background-color: rgba(112, 180, 191, 1);
display: block;
width: 0%;
position: relative;
right: 20px;
top: 5px; }
.orbit-container .orbit-timer > span {
display: none;
position: absolute;
top: 0px;
right: 0;
width: 11px;
height: 14px;
border: solid 4px #70B4BF;
border-top: none;
border-bottom: none; }
.orbit-container .orbit-timer.paused > span {
right: -4px;
top: 0px;
width: 11px;
height: 14px;
border: inset 8px;
border-left-style: solid;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
border-color: transparent #70B4BF transparent transparent; }
.orbit-container .orbit-timer.paused > span.dark {
border-color: transparent #333333 transparent transparent; }
.orbit-container:hover .orbit-timer > span {
display: block; }
.orbit-container .orbit-prev,
.orbit-container .orbit-next {
position: absolute;
top: 45%;
margin-top: -25px;
width: 36px;
height: 60px;
line-height: 50px;
color: white;
background-color: transparent;
text-indent: -9999px !important;
z-index: 10; }
.orbit-container .orbit-prev:hover,
.orbit-container .orbit-next:hover {
background-color: rgba(0, 0, 0, 0.3); }
.orbit-container .orbit-prev > span,
.orbit-container .orbit-next > span {
position: absolute;
top: 50%;
margin-top: -10px;
display: block;
width: 0;
height: 0;
border: inset 10px; }
.orbit-container .orbit-prev {
left: 0; }
.orbit-container .orbit-prev > span {
border-right-style: solid;
border-color: transparent;
border-right-color: #7FA7B2; }
.orbit-container .orbit-prev:hover > span {
border-right-color: white; }
.orbit-container .orbit-next {
right: 0; }
.orbit-container .orbit-next > span {
border-color: transparent;
border-left-style: solid;
border-left-color: #7FA7B2;
left: 50%;
margin-left: -4px; }
.orbit-container .orbit-next:hover > span {
border-left-color: white; }
.orbit-container .orbit-bullets-container {
text-align: center; }
.orbit-container .orbit-bullets {
margin: 0 auto 30px auto;
overflow: hidden;
margin-left: -70px;
position: relative;
top: ;
float: none;
text-align: center;
display: block; }
.orbit-container .orbit-bullets li {
display: inline-block;
width: 0.5625rem;
height: 0.5625rem;
background: #cccccc;
float: none;
margin-right: 6px;
border-radius: 1000px; }
.orbit-container .orbit-bullets li.active {
background: #CE3F3A; }
.orbit-container .orbit-bullets li:last-child {
margin-right: 0; }
.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
display: none; }
.touch .orbit-bullets {
display: none; }
#media only screen and (min-width: 40.063em) {
.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
display: inherit; }
.touch .orbit-bullets {
display: block; } }
#media only screen and (max-width: 40em) {
.orbit-stack-on-small .orbit-slides-container {
height: auto !important; }
.orbit-stack-on-small .orbit-slides-container > * {
position: relative;
margin-left: 0% !important;
opacity: 1 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
transition: none !important; }
.orbit-stack-on-small .orbit-timer {
display: none; }
.orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev {
display: none; }
.orbit-stack-on-small .orbit-bullets {
display: none; } }
[data-magellan-expedition], [data-magellan-expedition-clone] {
background: white;
z-index: 50;
min-width: 100%;
padding: 10px; }
[data-magellan-expedition] .sub-nav, [data-magellan-expedition-clone] .sub-nav {
margin-bottom: 0; }
[data-magellan-expedition] .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
margin-bottom: 0; }
[data-magellan-expedition] .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
line-height: 1.8em; }
}
thanks!

in your case I think it would be enough to add this bit of code to your css file:
.orbit-slides-container{
height: auto !important;
}
.orbit-container .orbit-slides-container li.active{
position:static;
}
I hope it helps

I've found a solution to fix the auto-height issue with the Orbit Slider.
.orbit-slides-container{
height: 100% !important;
}
.orbit-container .orbit-slides-container li.active{
position:relative;
}
I hope it helps

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

WHY my animated text are not coming on one line - html

Related

Trigger css animation only when it tis visible into the viewport

Ripple effect not working on non-chrome browers

Text area not editable/Unable to type text in text area

radio button and label

How do I change container height to match image height?

Categories

Resources