Jump to content


CSS reset?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Not specifically a GSAP question... but relevant to all GSAP ads:  I'm trying to figure out if it's customary to include CSS reset within HTM5 ad code.


Obviously, it's important to control for style inheritance -- but is that something that's typically done at the creative level?


Or is that something that's typically handled by an ad server?


On a more macro level: Anyone know of a basic style guide for delivering HTML5 ad creative? (Facebook, Google, etc).




Link to comment
Share on other sites

As I know CSS reset is needed only when You want to use buttons, selects and other GUI elements in Your ad. But since I am using only .png, .jpg, .svg and div assets I never bother with reset the browser predefined stuff.

Link to comment
Share on other sites

I have seen banners from other people that contain style resets out in the wild.


Personally, I think it is unnecessary given that the majority of time in a banner you're working with DIV and image tags absolutely positioned.


If you are fortunate enough to be allowed to use web-fonts and/or your creatives have other elements, just like Oliver has said, then it is a good idea but, there isn't any reason to reset everything. Just reset/normalise the elements you'll be using. 


And, no, as far as I am aware, the Ad server does no stylesheet reseting/normalising.


As for your macro level question. I don't quite understand what is it that you're asking.

  • Like 3
Link to comment
Share on other sites

If you are just using an <img> tag and a <div> like Dipscom advised. Then i would also make sure that your <img> tag has either the attribute border="0" on your <img> tag. Or apply the CSS equivalent inline or in a stylesheet.. img { border: 0 none transparent; }


This will prevent the ugly default browser defined style for a border around the <img> tag.



  • Like 2
Link to comment
Share on other sites

A really good answer! 

Link to comment
Share on other sites

This is my basic css reset for all banners:

<style type="text/css" media="screen">
*, *:before, *:after, html, body {
	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: content-box;
a {
	text-decoration: none;
	color: #000;
	border: none;
div {
	position: absolute;
	display: block;
.banner {
	display: block;
	position: absolute;
	overflow: hidden;
	width: 298px;
	height: 248px;
	background-color: #FFF;
	border: 1px solid #666;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
Link to comment
Share on other sites

Hello emmanuelulloa..


You might want to have transform-style: preserve-3d to be transform-style: flat in your reset CSS rules.


This way you don't have to deal with certain browser bugs and expected browser behavior for having that preserve-3d on an element by default.


The best way to only apply transform-style: preserve-3d when you need it within your tween. This way GSAP can set it to transform-style: flat when it is not needed.


It should only be used if your element is in a constant 3D state. But it's better to just apply it via JS GSAP when needed!



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.