CSS Did You Know? - December 4th, 2012

10 min read

Deviation Actions

bradleysays's avatar
By
bradleysays
Published:
23.4K Views
:iconneurotype-on-discord:
CSS is copyright, too

If you see a design that you like, save it to your hard drive, and then
replace all the content with your own, you are violating copyright. This is true even if you change the IDs and class names to make it look like your own work. If you didn't spend the time to create the HTML and CSS yourself, then you may be violating copyright.

--quoted from this article by Jennifer Kyrnin.


Without a Creative Commons license, using someone else's code to build your own skin and then sharing it—even if you made the images yourself—is a violation of site policy and even persecutable under copyright law. In the case of web design, copying someone's overall design and color schemes can also be grounds for a complaint.

Unless you have permission or you are using a resource posted for free use, the bottom line is you should always do your own coding.

Since dA site policy adds some modifiers to skin use, let's take a look at the terms. You see these in full when you hit the edit button on a skin and can't edit the skin without accepting them, but I've just chosen the most important pieces to share here. There is also a version that skin creators have to agree with before uploading a skin permitting people to make changes to their original design for personal use.

By accessing content contained in the deviantART Skins category ("Skin Content") you agree as follows:


You may use the Skin Content only on your user pages or on other pages and applications on deviantART designed to accept Skin Content ("Pages") and not otherwise.

You agree that the author responsible for the Skin Content will be credited by deviantART when you use the Skin Content.

You may modify the Skin Content as and when you use the Skin Content in accordance with this Agreement, but not otherwise. You may not represent the Skin Content, even as modified, as your own work without crediting the original author.

You may not grant permission to any other person to use the Skin Content, even as modified.


A person's code is their intellectual property. If you are inspired by their work to make your own skins, there are a ton of good tutorials that will teach you how to code from the ground up (a good starting point for these is eCSSited). But simply looking at their code and copying it—typing it out in Notepad instead of hitting copy-paste is still copying—is both a violation of copyright/site policy and incredibly disrespectful of the time they spent making a great resource for your use.

:iconmiontre:
Replacing Images with CSS

Traditionally, web designers have used images to create more visually interesting designs. However, recent developments in CSS3 allows us to completely code what would have required an image beforehand. Images can be replaced in many instances with new features, some of which are available for use right here on deviantART. Let's begin!


Shadows


You can very easily create a shadow on either some text or an element using a single line of CSS. Let's explore both.

text-shadow: x-offset y-offset softness colour

The above line will allow you to create a shadow on some text. The x-offest and y-offset affect the offset of the shadow along the x and y axes respectively (remember x is horizontal, and y is vertical). The softness allows you to control how blurred the shadow is. And of course, colour lets you pick a colour for your shadow.

box-shadow: x-offset y-offset softness size colour inset

The above line will put a shadow on an element. The x-offset, y-offset, softness, and colour affect the shadow in the same way as they do for the text-shadow property. However, the size attribute allows you to add extra size to the shadow. On the other hand; inset is an option, not a value which you set. You can use this to make the shadow cast inside your element, instead of outside it.

Here's a practical example of both properties:

text-shadow: 0px 1px 0px grey;
box-shadow: 2px 1px 3px 1px black;


Rounded Edges


Using CSS3, you can now very easily create rounded edged elements. Once again, only a single line of code is required to do this.

border-radius: radius

Or, alternatively

border-radius: radius radius radius radius

Just replace radius with either a pixel or percentage value, to control how "rounded" your edges are. In the second example, you can pick a different value for each corner.


Gradients


CSS3 allows us to generate gradients using pure CSS. This has already been explained excellently in a previous editing of CSS Did You Know by jonarific, which you can find here!


Shapes


Here is where the real fun begins. You can create basic shapes using pure CSS! There is no need to create an image to use certain basic shapes.

Cirlces and Ovals
You can create a circle or oval by bumping the border-radius to the maximum. Adding this line of code to any CSS property will make it take the shape of a circle or oval:

border-radius: 50%;

Next, simply define your width and height and you'll have a circle or oval!

Triangles
Creating triangles is already explained well over at CSS-Tricks!

Other Shapes
Using a bit of imagination, you can also create other shapes.. see if you can make a star!

:iconbradleysays:
What would you like to know?

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited! :)

:iconexcitedlaplz:
Previous editions

Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.

Read the CSS Did You Know? archive :pointr: here!




© 2012 - 2024 bradleysays
Comments51
Join the community to add your comment. Already a deviant? Log In
PizzaPotatoNBacon's avatar
PizzaPotatoNBacon
I'm just curious here:
While we're not allowed to re-use CSS codes without permission, can we study them and try to build codes from scratch? Some tutorials are pretty hard to understand. Also, viewing CSS in plain view is helpful (for me).
While I'm a minor (not under aged to be on dA, of course), I don't think the law would spare me at all, and I want a complete understanding of what's okay and what's not. I love to play around with coding and see what it can do, because I love it.

For example, I saw this neat journal, but I wanted to try adding some flair to it. What do I have to do in order to use the code properly? Just ask permission, and credit if the author allows me to do so? Or is it much, much more complicated than that?