We Keep Coding

How to place an animated checklist button right to text

I am using a template form I found which gives me a neat checklist form that I can use for a website I'm trying to develop (I'm doing this to learn)
So I want to know how to make these buttons:
appear on the right side of the text (I want to use RTL language)
To make it easier, here is the fiddle:
https://jsfiddle.net/h1jokddo/
I tried to modify the css code, adding "margin: right" to some of the properties but no luck:
body {
background: #069ffb;
color: #fff;
}
.ac-custom {
padding: 0 3em;
max-width: 900px;
margin: 0 auto;
}
.ac-custom ul,
.ac-custom ol {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 800px;
}
.ac-custom li {
margin: 0 auto;
padding: 2em 0;
position: relative;
}
.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 80px;
vertical-align: top;
color: rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}
.ac-custom input[type="checkbox"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}
.ac-custom label::before {
content: '';
border: 4px solid #fff;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.ac-radio label::before {
border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label {
color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before {
opacity: 0.8;
}
/* General SVG and path styles */
.ac-custom svg {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: 5px;
pointer-events: none;
}
.ac-custom svg path {
stroke: #fdfcd3;
stroke-width: 13px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
/* Box Fill */
.ac-boxfill svg path {
stroke-width: 8px;
}
I need to know what to change there.
As I stated before, this is something I'm doing in order to learn, this is how I learn at least, I take something that is already working, and try to find out what makes everything work.

Remove the padding from your label and add the desired amount of pixels to left of your checkbox in the css. Also add the amount of pixels to the left of the svg
Like so:
.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 0px;
vertical-align: top;
color: rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 50px;
margin-top: -25px;
position: absolute;
cursor: pointer;
}
.ac-custom svg {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: 55px;
pointer-events: none;
}
See fiddle

Add the below code at the end of your css
.ac-custom label {
padding: 0;
}
.ac-custom input[type="checkbox"], .ac-custom label::before {
left: 40px;
}
.ac-custom svg {
top: 54%;
left: 49px;
}
Updated : https://jsfiddle.net/arifahmedjoy/h1jokddo/7/

Masking issue when sliding multiple divs behind a line

I have a CSS animation effect that's difficult to implement due to layering problems. See the snippet below:
var toggle = document.getElementById('toggle');
function toggleF() {
'use strict';
document.querySelector('nav').classList.add('fuzzyState');
}
toggle.addEventListener('click', toggleF);
body {
height: 90%;
color: #222;
text-align: center overflow:hidden;
}
button {
outline: 0;
cursor: pointer
}
#toggle {
float: left;
width: 38px;
height: 38px;
padding: 5px;
margin: auto;
background: #fff;
color: #666;
border: 0;
font-size: 150%
}
#toggle:hover {
background: #222;
color: #eee;
user-select: none;
-webkit-user-select: none
}
#toggle:active {
background: #022;
color: #fff
}
nav ul:after {
content"";
display: block;
clear: both
}
nav ul {
height: 150px;
margin: 0;
padding: 0;
font-size: 150%
}
nav li {
width: 140px;
height: 140px;
margin: 5px;
float: left;
list-style: none;
user-select: none;
-webkit-user-select: none
}
nav button {
display: block;
position: relative;
top: 50%;
width: 100%;
height: 100%;
background: transparent;
border: 0;
text-transform: uppercase;
transform: translateY(-50%)
}
nav button:hover {
background: #022;
color: #eee
}
nav button:active {
background: #033;
color: #fff
}
ul hr {
position: relative;
top: 50%;
width: 1px;
height: 90px;
margin: 10px;
background: #eee;
border: 0;
float: left;
transform: translateY(-50%);
z-index: 2
}
nav.fuzzyState #dos {
transform: translateX(230px)
}
nav.fuzzyState #uno {
transform: translateX(400px);
-webkit-filter: blur(1px)
}
nav.fuzzyState #tres {
/*transform:translateX(-230px)*/
}
nav #tres {
position: relative;
z-index: 1
}
#leftNavMask {
background: #fff;
position: absolute;
top: 15%;
right: 0;
left: 356px;
width: 200px;
height: 190px;
text-align: justify;
transform: translateY(-50%);
}
#rightNavMask {
background: #fff;
position: absolute;
top: 15%;
right: 0;
left: 156px;
width: 200px;
height: 190px;
text-align: justify;
transform: translateY(-50%);
z-index: -1
}
#dos,
#tres {
transition: transform 0.7s ease-in-out
}
#uno {
transition: transform 1s ease-in-out, -webkit-filter 1s ease-in-out;
}
<button id="toggle">+</button>
<nav>
<ul>
<li id="uno"><button>uno</button></li>
<li id="dos"><button>dos</button></li>
<hr>
<li id="tres"><button>tres</button></li>
<div id="leftNavMask"></div>
<div id="rightNavMask"></div>
</ul>
</nav>
After the + button is clicked my goal is to make the tres button slide to the left while being masked just like the uno and dos buttons, except in the opposite direction. It seems impossible to pull off because whatever z-index I give any elements there's no way to have the left mask on top of the correct elements while simultaneously having the right mask do its job. Are there any simple ways to do this without jQuery? Thanks.
To clarify: The uno and dos buttons are currently going under a div that is colored to match the background. I need the tres button to slide left under a second div that is somehow on top of the tres button to mask it but also below the uno and dos buttons so they aren't blocked at the beginning.

Long time since this question was asked, therefore, most probably you have found a solution already. But just in case, here you have a possible approach to what you wanted to achieve.
Instead of using absolute positioned divs with the same color of the background to cover the animated li elements, why don't use an overflow hidden property in the ul container? If you do this, the ul will act as a "mask" and when the li elements get animated outside the ul, they will be automatically "hidden". Take a look at your snippet already modified using this approach (I have used two ul elements to animate the li elements separately):
I saw that you placed an hr (and two div) inside the ul element and a ul should only contain li elements. For this solution, I used a pseudo-element to mimic the vertical line.
var toggle = document.getElementById('toggle');
function toggleF() {
document.querySelector('nav').classList.toggle('fuzzyState');
}
toggle.addEventListener('click', toggleF);
body {
color: #222;
}
button {
cursor: pointer;
outline: 0;
}
#toggle {
background: #fff;
border: 0;
color: #666;
float: left;
font-size: 150%;
height: 38px;
margin: auto;
padding: 5px;
width: 38px;
}
#toggle:hover {
background: #222;
color: #eee;
user-select: none;
}
#toggle:active {
background: #022;
color: #fff
}
nav ul {
display: inline-block;
font-size: 150%;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
nav ul.left::after {
content: "";
display: block;
border-right: 1px solid #eee;
height: 90px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
nav li {
display: inline-block;
height: 140px;
list-style: none;
margin: 5px;
user-select: none;
transition: transform 0.7s ease-in-out;
width: 140px;
}
nav button {
background: transparent;
border: 0;
display: block;
height: 100%;
position: relative;
text-transform: uppercase;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
nav button:hover {
background: #022;
color: #eee;
}
nav button:active {
background: #033;
color: #fff;
}
nav.fuzzyState ul > li {
pointer-events: none;
}
nav.fuzzyState ul.left > li {
transform: translateX(200%);
}
nav.fuzzyState ul.right > li {
transform: translateX(-100%);
}
<button id="toggle">+</button>
<nav>
<ul class="left">
<li><button>uno</button></li>
<li><button>dos</button></li>
</ul>
<ul class="right">
<li><button>tres</button></li>
</ul>
</nav>

Button hover will change the background of div and a picture in between two blocks

I am trying to do css based hovering for background and picture to show up on hovering over a button/link inside the main div only.
The problem is that the background color is showing up all over the page and not limited to just that div block where I am trying to all these things.
here is the code:
<div class="suction">
<ul class="menu">
<div class="block">
<li>h</li>
<li>g</li>
<li>i</li>
<li class="bg"></li>
</div>
<div class="block">
<li>p</li>
<li>l</li>
<li>m</li>
<li class="bg"></li>
</div>
</ul>
Here is the css:
* {
margin: 0;
padding: 0;
}
body {
background: #e5e5e5;
}
suction {
margin:0 auto;
max-width:100%;
height: 400px;
}
.block {
width: 20%;
padding: 25px 0;
display: inline-block;
margin: 10px;
}
.bg {
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: .25s;
pointer-events: none;
}
li {
list-style: none;
}
li a {
display: block;
float: ;
width: 20%;
padding: 25px 0;
text-align: center;
font-family: 'HeydingsCommonIconsRegular', Helvetida Neue, sans-serif;
font-weight: 700;
letter-spacing: 1px;
font-size: 40px;
color: #fff;
background: #ccc;
text-decoration: none;
text-transform: uppercase;
text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
transition: .25s;
}
li a:hover {
margin: -10px 0 0 0;
}
.ajabmenu {
margin: 60px auto 0 auto;
border-radius: 10px;
overflow: hidden;
display: block
}
.ajabmenuu li:first-child a {
background: #ffca6d !important;
}
.ajabmenu li:nth-child(2) a {
background: #ff6d6d !important;
}
.ajabmenu li:nth-child(3) a {
background: #6dffb9 !important;
}
.ajabmenu li:nth-child(4) a {
background: #6dcaff !important;
}
.ajabmenu li:nth-child(5) a {
background: #ec6dff !important;
}
.ajabmenu li:first-child:hover ~ .bg {
background: #ffca6d url("https://www.drupal.org/files/images/druplicon-polska-small.png") no-repeat center top fixed;
}
.ajabmenu li:nth-child(2):hover ~ .bg {
background: #ff6d6d;
}
.ajabmenu li:nth-child(3):hover ~ .bg {
background: #6dffb9;
}
.ajabmenu li:nth-child(4):hover ~ .bg {
background: #6dcaff;
}
.ajabmenu li:nth-child(5):hover ~ .bg {
background: #ec6dff;
}
Codepen link
Everything should be under 'suction' block and never goes out. I tried removing that Fixed from .bg but it doesnt work.
Please let me know if there is any good method or easy way to do it.

Ok, first solution didn't work. Try this:
You absolutely need to lose the background color on your 'suction' class, but this codepen works.
Codepen
What I did was basically place the dot (.) before your 'suction' class, since it wasn't doing anything, change the background to transparent, and change the fixed position on your .bg class to absolute, and a width / height of 100%.
Here are the classes that matter:
.suction {
width: 50%;
background: transparent;
margin: 10px auto;
position: relative;
text-align:center;
}
.bg {
z-index: -1;
position: absolute;
top: 0;
left: 0;
transition: .25s;
pointer-events: none;
width: 100%;
height: 100%;
}

CSS ::after selector animates slower

so i have a dropdown menu that will fade in once a link is clicked. once the link is clicked everything is fine the menu fades in but once i click off and a function runs that fades out the dropdown. the triangle that is on top of the box fades out slightly slower than the actual box. in css i have made this triangle with the :after selector and a fiddle can be found JsFiddle
HTML
<?php echo 'Welcome ' . $user->data()->fname . '!'; ?>
<div class="Account-Links">
My Account
Sign Out
Help
</div>
CSS
.Account-Actions {
postition: relative;
}
.Account-Links {
position: absolute;
top: 45px;
left: 0;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
width: 200px;
height: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
z-index: 1000;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.Account-Links-On {
height: auto;
visibility: visible;
opacity: 1;
}
.Account-Links::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.Account-Link {
display: block;
color: #FFF;
margin: 0;
padding: 10px;
}
.Account-Link:hover {
background-color: rgba(231,76,60,.75);
}
a {
text-decoration: none;
}
a.Header-Link {
position: relative;
display: block;
margin: 0 10px;
padding: 0 8px;
line-height: 47px;
color: #777;
border-bottom: 3px solid transparent;
}
a.Header-Link:hover {
color: #000;
}
JS
$(document).ready(function(){
$('.Account-Actions').bind('click', function(){
$('.Account-Links').toggleClass('Account-Links-On');
});
$('html').click(function() {
$('.Account-Links').removeClass('Account-Links-On');
});
$('.Account-Links, .Account-Actions').click(function(event){
event.stopPropagation();
});
});

You have created that arrow on different class and toggling the opacity on other class. You arrow shouldn't be on .Account-Links. It should be on .Account-Links-On if you don't want that delay to happen.
SEE THE DEMO
.Account-Links-On::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
And this concludes that :after psuedo selector doesn't animate slower.

How to change the look of the controls for this rotating banner

I'd like to change the look of the controls for this rotating banner. They are currently just grey (and the current/selected one is black). I want the dots to be white with a grey outline (and the selected/current one to be orange with a grey outline).
Here's the css (I believe the selector is: .rslides_tabs a):
.rslides_container
{
position: relative;
}
.rslides
{
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li
{
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child
{
position: relative;
display: block;
float: left;
}
.rslides img
{
display: block;
height: auto;
float: left;
width: 100%;
max-width: 100%;
border: 0;
}
.rslides_tabs
{
margin-top: 10px;
text-align: center;
}
.rslides_tabs li
{
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.rslides_tabs a
{
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-background-clip: padding-box;
background: #ccc;
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.rslides_tabs .rslides_here a
{
background: #222;
}
.rslides_nav
{
position: absolute;
-webkit-tap-highlight-color: #000;
top: 50%;
left: 0;
-webkit-opacity: 0.7;
-moz-opacity: 0.7;
-o-opacity: 0.7;
filter: alpha(opacity=70);
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url( '../images/responsiveslides.gif' ) no-repeat left top;
margin-top: -45px;
}
.rslides_nav:active,
.rslides_nav:hover
{
-webkit-opacity: 1;
-moz-opacity: 1;
-o-opacity: 1;
filter: alpha(opacity=100);
opacity: 1;
}
.rslides_nav.next
{
left: auto;
background-position: right top;
right: 0;
}
If you need any more code to help me out, please let me know.

.rslides_tabs .rslides_here a
Is the one where you currently are
.rslides_tabs a
Has the value of the dot that is not selected.
Change the background property to the color you want.

.rslides_tabs a {
background-color:red;
border: 1px solid grey;
//here goes your style
}
.rslides_tabs .rslides_here a {
//here goes your style for the selected one
}