Copy and pasting CSS without really understanding it

Get Help CSS
#1

Hi,

I know I’ve probably come to the wrong place to ask this question, so banish me if that’s the case! :smile:

Basically I’m a designer who has just discovered Elementor, so it’s now opened up the possibility of bringing my own web design to life.

Everything has been going fine, however I’m always prone to seeing how far I can push things before the learning curve gets too steep. In my case, coding is something that just boggles my brain, I’m not sure I will ever have a full grasp of it.

Saying all this, I do understand the power of code and how it’s applied.

My question is… Can someone who doesn’t really understand code just copy and paste it in? I’ve attempted this and failed.

To give a specific example. I found this site http://animation.kaustubhmenon.com/ It gives visual examples so that I know which piece of code relates to what.

I like the simple fade in.

I jump over to Elementor to test it out.

This is my code
selector @-webkit-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-o-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }

.u–fadeIn {
-webkit-animation: fadeIn 1s ease-in;
-moz-animation: fadeIn 1s ease-in;
-o-animation: fadeIn 1s ease-in;
animation: fadeIn 1s ease-in; }

I can one error, Expected LBRACE at line 1, col 10.

My understanding of this is, I need to insert a { at line 1. I have done this but it throws up more errors.

Is my approach completely unrealistic?

#2

Welcome to the community, Jason.

And yes, this is the right place to ask. The effect works, as you can see here on CodePen

HTML

<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
		
	</style>
</head>
<body>

	<div class="u-fadeIn">
		<img src="https://images.theconversation.com/files/350865/original/file-20200803-24-50u91u.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=675.0&fit=crop">
	</div>

</body>
</html>

CSS

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.u-fadeIn {
  -webkit-animation: fadeIn 1s ease-in;
  -moz-animation: fadeIn 1s ease-in;
  -o-animation: fadeIn 1s ease-in;
  animation: fadeIn 1s ease-in;
}

So I’m not too sure what went wrong for you…

Why do you have “selector” on your first line, though?
selector @-webkit-keyframes fadeIn {

#3

Hi,

Thank you for your reply!

Hmm yeah it does appear to work. I’m using Elementor so I was curious to see if I could take code for animations and drop them into the custom css option on my elements.

‘Selector’ I thought was required to select the container I am applying the code to. However when I ditch ‘selector’ and just copy and paste the code direct, as you have done above, I can no error, but the animation doesn’t work when I preview it.

I wonder if this is an error on Elementors end.

Thank you for help, much appreciated!

1 Like
#4

Hi @jasonbrown5210798411,

Just a quick question since I haven’t used Elementor, is there some place in your code where you have referenced the class from the css to show what the animations are working on?
This is where the code is called to work on the html using the class name:

.u-fadeIn {
  -webkit-animation: fadeIn 1s ease-in;
  -moz-animation: fadeIn 1s ease-in;
  -o-animation: fadeIn 1s ease-in;
  animation: fadeIn 1s ease-in;
}

and this is where it connects to the html class:

<div class="u-fadeIn">

Just something I was wondering might be causing the disconnect in your code while looking over the codepen version. Often we don’t name things the same as the person who makes these samples and we need to ensure that, if we are copying, that we match that exactly to make it work in our code as well.

1 Like
#5

Hi Chelsea,

Thank you for your reply!

is there some place in your code where you have referenced the class from the css

Apologies if I sound ignorant or dumb. I don’t think I have referenced the class.

I have an option in Elementor where I can name the css class of an object.

Does the CSS and HTML code work together? So I have to copy and paste both in order for it to work?

I was under the impression the CSS and HTML codes were doing the same thing, just in different formats. So that I only need to pick one.

Thanks,
Jason

#6

Hi Jason,

HTML and CSS work together, but they have to be linked to one another in order to do so. Not only does there have to be a link to the CSS within the HTML like here:

<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">  <!--link to CSS stylepage-->
		
	</style>
</head>

but you also have to have elements, classes or IDs that tell the CSS what to style. That is where the class “u-fadeIn” come to play in the HTML here:

and the CSS here:

in the case of Elementor, if you have a place you can name the class for the CSS, I would suggest trying to input the class “u-fadeIn” in that spot and see if it successfully connects with the CSS.

If that does not work, then I think you need to take some more time and study how to customize your CSS in Elementor. I recommend starting with this video and going from there. Wordpress is generally good with providing tutorials on all of their products and customization options:

1 Like
#7

Magic!

That has worked! Thank you!

1 Like
#8

Sorry to bother you again, I have another example!

I’m trying to apply the ‘Transform + Shadow’ effect seen on button 5 https://codepen.io/markmead/pen/xJxyGO

I don’t want any of the button styling, I just want to take the animation and apply it to my own button. Is something like this possible?

My limited understanding, is that I need to use this section of code:

&-5:hover {
box-shadow: 0 6px 18px 0 rgba(#000, 0.1);
transform: translateY(-6px);
}
&–transparent {
color: $primary;
background-color: transparent;
}

Which I understand to be, on hover move 6px on the Y position, creating a box shadow.

I have named my button class, btn to follow the HTML and applied the following code in Elementor.

.btn hover {
box-shadow: 0 6px 18px 0 rgba(#000, 0.1);
transform: translateY(-6px);
}
&–transparent {
color: $primary;
background-color: transparent;
}

Nothing happens and it throws up the following errors:

Expected end of value but found 'rgba (#000 , 0.1)
Unexpected token ‘&’ at line 5, col 3.
Unexpected token ‘-’ at line 5, col 4.
Unexpected token ‘$’ at line 6, col 12.

1 Like
#9

Hi Jason,

Let’s see what we can do here :slight_smile:

The reason ‘&-transparent’ doesnt work is the way classes are being added together. This is a modifier to the “btn” class and the syntax itself is a CSS and HTML thing which is why its throwing the error. If you are applying this hovering to one button in your website and its not dependent on conditions (like the codepen example is) then you can set it up like the following:

.btn hover {
box-shadow: 0 6px 18px 0 rgba(#000, 0.1);
transform: translateY(-6px);
color: $primary;
background-color: transparent;
}

now, $primary is a placeholder for the color. So, you just need to swap that out with whatever colour you want the text to be. So, you could just change that out to ‘white’ or something.

Now, IF that doesn’t work, try to add a colon between the .btn and hover like this:

.btn:hover {

Without going too far into it for your use, its a syntax thing for CSS and I am just not sure if it will be the same in your situation.

I am not sure if that will all work for you on Elementor, but that is what would work for normal HTML and CSS applications in coding!

Good Luck!