Code MyFreeCams Profiles - Customs
Designing MyFreeCams Profiles
MFC is a flexible and intuitive platform
We recommend the following material as your own backbone for further developments of your projects.
IDs and CLASS - external css
MyFreeCams is using their own IDs and CLASS with external CSS style sheat. A good starting point is to know which are those IDs and CLASS, their css atributes and what exactly they do.
CLASS and ID
hover the icon for additional info
| TAGS and MARKUPS | ATTRIBUTES and PROPERTIES |
|---|---|
| HTML | Please Note: some of the HTML markup is already covered by CB documentation |
<div> |
Defines a section in a document |
<h1>....<h6> |
Defines HTML headings |
<hr> |
Defines a thematic change in the content |
<section> |
Defines a section in a document |
<table> |
Defines a table |
.gr- |
Custom class similar to .col classes but adapted for MyFreeCams platform |
|
... |
| CSS | |
body {...} |
Defines the body css markup of the documentbody { background-color: #f1f1f1; color: #333; font: 15px/20px -apple-system, "HelveticaNeue", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; width:90%; margin:0 auto; } |
a{...} a:{...} a:hover{...} a:active{...} |
Defines all css properties for global links and their hover/ active effectsa, a:visited {color:#09C; text-decoration:none;} |
-webkit-align-content: center; |
Specifies the alignment between the lines inside a flexible container when the items do not use all available space {display: flex; |
animation-* |
A shorthand property for all the animation-* propertiesdiv {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: changecolor 5s infinite;
animation: changecolor 5s infinite;
}
@-webkit-keyframes changecolor {
from {background: red;}
to {background: green;}
}
@keyframes changecolor {
from {background: red;}
to {background: green;}
} |
animation-delay |
Specifies a delay for the start of an animation
animation-delay: 2s; |
animation-direction |
Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-direction: alternate; |
animation-duration |
Specifies how long an animation should take to complete one cycle
animation-duration: 3s; |
animation-fill-mode |
Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)animation-fill-mode: forwards; |
animation-iteration-count |
Specifies the number of times an animation should be playedanimation-iteration-count: 2; |
animation-name |
Specifies a name for the @keyframes animationanimation-name: changecolor; |
animation-play-state |
Specifies whether the animation is running or pausedanimation-play-state: paused; |
animation-timing-function |
Specifies the speed curve of an animationanimation-timing-function: linear; |
background |
A shorthand property for all the background propertiesbackground-* |
background-attachment |
Sets whether a background image scrolls with the rest of the page, or is fixedbackground-image: url("logo.gif"); background-repeat: no-repeat; background-attachment: fixed; |
background-blend-mode |
Sets whether a background image scrolls with the rest of the page, or is fixedbackground-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity; |
background-clip |
Defines how far the background (color or image) should extend within an elementbackground-clip: border-box|padding-box|content-box|initial|inherit; |
background-color |
Specifies the background color of an elementbackground-color: color|transparent|initial|inherit; |
background-image |
Specifies one or more background images for an elementbackground-image: url|none|initial|inherit; |
border |
A shorthand property for border-width, border-style and border-colorborder: 2px solid #000; |
border-radius |
A shorthand property for the four border-radius properties -*-border-radius-webkit-border-radius: 8px; border-radius: 8px; |
bottom |
Sets the elements position, from the bottom of its parent elementbottom: auto|20px|initial|inherit; |
box-shadow |
Attaches one or more shadows to an elementbox-shadow: 5px 10px #888888; |
box-sizing |
Defines how the width and height of an element are calculated: should they include padding and borders, or notbox-sizing: content-box|border-box|initial|inherit; |
color |
Sets the color of textcolor: #ccc |
display |
Specifies how a certain HTML element should be displayeddisplay: none|inline|block|inline-block; |
filter |
Specifies how a certain HTML element should be displayedfilter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); |
float |
Specifies whether or not a box should floatfloat: none|left|right|initial|inherit; |
@font-face |
A rule that allows websites to download and use fonts other than the fonts categorized as web-safefont-family: Lato; src: url(lato.woff); |
font-style |
Specifies the font style for textfont-style: normal|italic|oblique|initial|inherit; |
height |
Sets the height of an elementheight: auto | 100% | 30vh | 430px |
justify-content |
Specifies the alignment between the items inside a flexible container when the items do not use all available spacejustify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit; |
@keyframes |
Specifies the animation code *-keyframes:@keyframes numeanimatie {keyframes-selector {css-styles;}} |
list-style |
Sets all the properties for a list in one declarationlist-style: list-style-type list-style-position list-style-image|initial|inherit; |
margin |
Sets all the margin properties in one declarationmargin: 33px | auto| initial | inherit | 50%; |
@media |
Sets the style rules for different media types/devices/sizes@media not|only mediatype and (mediafeature and|or|not mediafeature) {CSS-Code;} |
opacity |
Sets the opacity level for an elementopacity: 1|.5|initial|inherit; |
overflow |
Specifies what happens if content overflows an element's boxoverflow: visible|hidden|scroll|auto|initial|inherit; |
padding |
A shorthand property for all the properties related to padding-*;padding: length|initial|inherit; |
position |
Specifies the type of positioning method used for an element (static, relative, absolute or fixed)position: static|absolute|fixed|relative|sticky|initial|inherit; |
right |
Specifies the right position of a positioned elementright: auto|60px|initial|inherit; |
text-align |
Specifies the horizontal alignment of texttext-align: left|right|center; |
text-shadow |
Adds shadow to texttext-shadow: 2px 2px #ccc; |
text-transform |
Controls the capitalization of texttext-transform: none|capitalize|uppercase|lowercase|initial|inherit; |
top |
Specifies the top position of a positioned elementtop: auto|20px|initial|inherit; |
transform |
Applies a 2D or 3D transformation to an element *-transform:transform: none|transform-functions|initial|inherit; |
transition |
A shorthand property for all the properties related to *-transition:transition: property duration timing-function delay|initial|inherit; - transition: width .4s; |
z-index |
Sets the stack order of a positioned elementz-index: auto|99|-1|1|100|initial|inherit; |
.class |
Selects all elements which are using this class class="info".info {...} |
.name-one .name-two |
Selects all elements with both name-one and name-two set within its class attribute<div class="name-one name-two">...</div> |
#id |
Selects the element with #mybox and assignes css properties to it<div id="mybox">...</div> |
* |
Selects all elements*{...css properties here...} |
:target |
Selects the current active #camgirlcloud element (click on a URL that contains the name as the anchor). Most often used for browsing the same page.#camgirlcloud:target |
| Please note that we didn't added all selectors, properties but only most common ones | |
