Menschen Wissenschaft Politik Mystery Kriminalfälle Spiritualität Verschwörungen Technologie Ufologie Natur Umfragen Unterhaltung
weitere Rubriken
PhilosophieTräumeOrteEsoterikLiteraturHelpdeskAstronomieGruppenSpieleGamingFilmeMusikClashVerbesserungenAllmysteryWillkommenEnglishGelöscht
Diskussions-Übersichten
BesuchtTeilgenommenAlleNeueGeschlossenLesenswertSchlüsselwörter
Schiebe oft benutzte Tabs in die Navigationsleiste (zurücksetzen).

Code- und Designerecke für Allmy Profile und Blogs

46 Beiträge, Schlüsselwörter: Hilfe, Profil, Blog, Tipps, Design, Code, Html, CSS, Tricks, Styling, Animationen + 14 weitere
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

03.02.2016 um 23:07
Star Wars | Profil Theme Basic

Passend zum aktuellen Star Wars Fieber habe ich das "Star Wars Basic Theme" fertiggestellt:

thumb

thumb2

thumb3

thumb4

thumb5

Ich will gar nicht viel beschreiben! Einfach mal einbauen und probieren :Y:

Der Code


<style type="text/css">
/*
STAR WARS BASIC THEME
Author: S_C (https://www.allmystery.de/mitglieder/S_C)
Date: 03.02.2016
*/

/* -----### google fonts ###----- */
@font-face {
font-family: 'Amarante';
font-style: normal;
font-weight: 400;
src: local('Amarante Regular'), local('Amarante-Regular'), url(https://fonts.gstatic.com/s/amarante/v4/mf2HDk-wdi2JEvIxvmwX9vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

@font-face {
font-family: 'Abel';
font-style: normal;
font-weight: 400;
src: local('Abel'), local('Abel-Regular'), url(https://fonts.gstatic.com/s/abel/v6/brdGGFwqYJxjg2CD1E9o7g.woff2) format('woff2');
}

/* allmy off */
.userfunction,
.header,
.tabnav,
.head_links,
.profile_links,
.profile_pic,
.profile_info,
.infoleiste,
center,
.gb_post_usericon,
h2,
.footer,
.videoWrapper,
iframe {
display: none !important;
}

.profile_posts {
display: block !important;
}

html {
cursor: url('https://static.allmystery.de/upics/73c049_cr.png'), move;
}

body {
font-family: 'Abel', sans-serif !important;
color: #FDF253 !important;
padding-top: 0px !important;
background-color: #000;
background-image: url('https://static.allmystery.de/upics/71e8d4_bg.jpg') !important;
background-repeat: repeat !important;
background-position: center top !important;
background-attachment: fixed !important;
background-size: cover !important;
overflow-x: hidden;
}

.page {
width: 100% !important;
max-width: 100% !important;
min-width: 0px !important;
margin: 0px auto;
padding: 0;
background: transparent;
line-height: 1.5;
}

.main {
width: 100% !important;
max-width: 100% !important;
padding-top: 0px !important;
padding-left: 0px !important;
margin-right: auto !important;
margin-left: auto;
text-align: center;
background: transparent;
}

#show_gb_post_wrap {
font-size: 40px;
color: transparent;
position: relative;
margin: -280px auto 0 auto;
width: 350px;
text-align: center;
visibility: hidden;
}

#show_gb_post_wrap:after {
content: "Eintrag verfassen";
margin: -120px auto 30px auto;
width: 350px;
text-align: center;
visibility: visible;
text-decoration: none;
font-size: 40px;
color: #F6EDD8;
}

ul#gb_posts {
width: 960px !important;
margin: 180px auto 0 auto !important;
position: relative !important;
text-align: center;
}

ul#gb_posts li {
margin-bottom: 20px !important;
width: 450px !important;
margin: 0 15px;
padding-top: 20px;
}

#gb_posts li a.gb_post_img {
width: 150px !important;
height: 150px !important;
text-align: center;
padding: 69px 0px 0px 0px !important;
margin: 0px auto 10px auto !important;
position: relative !important;
display: block !important;
float: none !important;
background: url('https://static.allmystery.de/upics/c9c93a_jedi_logo2.png') no-repeat center;
}

#gb_posts li a.gb_post_img img {
width: 60px !important;
height: 60px !important;
border: 2px solid #DE2101 !important;
-webkit-animation: postimgimg 5s infinite linear;
animation: postimgimg 5s infinite linear;
}

@-webkit-keyframes postimgimg {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes postimgimg {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

#gb_posts li a.gb_post_img:hover {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}

#gb_posts li a.gb_post_img:hover + .gb_post_text {
display: block;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}

.gb_post_text {
display: none;
}

#gb_posts .gb_post_text {
float: left;
position: relative;
width: 430px;
font-size: 17px;
padding: 0 10px;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

img.bild {
width: 100%;
max-width: 300px !important;
z-index: 1 !important;
position: relative !important;
margin: 20px auto !important;
display: block !important;
border: 4px solid #F6EDD8;
background-color: #F6EDD8;
font-size: 0;
}

#gb_post_wrap {
width: 470px !important;
height: 70px !important;
margin: 0px auto 120px auto !important;
}

#gb_post_textarea {
padding: 10px !important;
min-height: 135px !important;
border: 1px solid #fff !important;
height: 120px !important;
font-size: 17px !important;
width: 100% !important;
position: relative !important;
margin: 90px auto 30px auto !important;
display: block !important;
left: 0 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: linear-gradient(130deg, #2B4956, #7AC0C0, #E6E1D0, #E68966, #E8CAAF, #FACB3D, #2DCC70);
background-size: 1000% 1000%;
-webkit-animation: gbfield 20s ease infinite;
-moz-animation: gbfield 20s ease infinite;
animation: gbfield 20s ease infinite;
}

@-webkit-keyframes gbfield {
0% { background-position:0% 50% }
50% { background-position:100% 50% }
100% { background-position:0% 50% }
}
@-moz-keyframes gbfield {
0% { background-position:0% 50% }
50% { background-position:100% 50% }
100% { background-position:0% 50% }
}
@keyframes gbfield {
0% { background-position:0% 50% }
50% { background-position:100% 50% }
100% { background-position:0% 50% }
}

input#gb_post_submit {
height: 135px;
width: 181px;
top: 0px !important;
left: 370px;
color: transparent !important;
font-size: 0px !important;
border: none !important;
background: url("https://static.allmystery.de/upics/bf7cd9_post.png");
opacity: 1;
}

input#gb_post_submit:hover {
cursor: url('https://static.allmystery.de/upics/7f1bb5_cr_hov.png'), move;
opacity: 0.7;
}

a[href^="/mitglieder/"] strong {
color: #F6EDD8 !important;
line-height: normal;
margin: 0px;
}

a[href^="/mitglieder/"] strong:hover {
color: #FDF253 !important;
}

a[href^="/mitglieder/"] strong:after {
content:" schrieb";
font-family: 'Abel', sans-serif !important;
color: #fff !important;
font-size: 14px;
text-shadow: none;
text-transform: none;
margin-top: 10px;
}

#gb_posts .gb_post_text a {
color: #383a3c !important;
font-size: 14px;
width: 220px;
margin: 0 auto;
}

#gb_posts .gb_post_text:before {
content:"";
color: #383a3c !important;
margin: 0px;
}

#gb_posts .gb_post_text:after {
content:"- Lieben Dank für deinen Eintrag -";
font-family: 'Abel', sans-serif !important;
font-weight: 400;
color: #C11700 !important;
font-size: 14px;
margin-top: 20px;
}

small {
color: #D35244;
}

.delete_gb_entry {
color: #D35244 !important;
display: inline-block !important;
}

a:hover {
color: #2B4956;
}

.uicons {
line-height: 17px !important;
transform: scale(1.3);
margin: 0 3px;
}

/* -----### star wars layout ###----- */
* {
box-sizing: border-box;
}

#mobile {
display: none !important;
}

.head {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
left: 0;
background-image: url('https://static.allmystery.de/upics/58509a_bg_menue.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: scroll;
border-bottom: solid 1px #0B3565;
z-index: 10000;
}

.container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}

.head .row {
position: relative;
}

.row {
padding-top: 1em;
padding-bottom: 1em;
margin-left: -10px;
margin-right: -10px;
}

nav ul, nav ol {
list-style: outside none none;
padding: 0px;
}

.clear:before, .clear:after {
content: "";
display: table;
}

.clear:after {
clear: both;
}

.clear {
zoom: 1;
}

#thema1, #thema2, #thema3, #thema4, #thema5, #thema6, #memory {
border-top: solid 1px #0B3565;
}

section:before {
content: " ";
margin-top: -100px;
height: 170px;
visibility: hidden;
}

#logo {
width: 150px;
height: 150px;
position: absolute;
top: -100px;
left: 50%;
margin-left: -75px;
z-index: 20;
perspective: 1000;
-webkit-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}

#logo:hover {
top: 5px;
background-color: #000;
-webkit-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}

#flip_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transition: all 2.5s linear;
-moz-transition: all 2.5s linear;
-o-transition: all 2.5s linear;
transition: all 2.5s linear;
}

#logo:hover #flip_card {
-webkit-transition: rotateY(180deg);
-moz-transition: rotateY(180deg);
-o-transition: rotateY(180deg);
transform: rotateY(180deg);
}

.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.face.back {
transform: rotateY(180deg);
color: #fff;
text-align: center;
}

.back-inner {
width: 150px;
height: 150px;
text-align: center;
margin: 0 auto;
background-color: #000;
background-image: url('https://static.allmystery.de/upics/b6f553_heartbeat2.gif');
background-repeat: no-repeat;
background-position: center 73%;
}

.front img {
max-width: 150px;
border-radius: 50%;
cursor: pointer;
}

.back-inner img {
max-width: 150px;
border-radius: 50%;
cursor: pointer;
}

nav ul#main-nav {
margin: 25px 0px;
}

nav ul#main-nav li {
padding: 0px;
width: 14.2%;
font-family: Amarante,Times New Roman,serif;
font-size: 20px;
text-align: center;
float: left;
display: inline-block;
line-height: 48px;
padding: 0px 15px;
}

nav ul#main-nav li a {
color: #F6EDD8;
text-decoration: none;
}

nav ul#main-nav li a:hover {
color: #FDF253;
}

.ctm_main {
padding-top: 50px;
}

.section-inner {
overflow: hidden;
padding: 30px 0px;
background: transparent;
position: relative;
z-index: 0;
}

h3, .h3 {
font-size: 30px;
}

h3 {
line-height: normal;
margin: 0px 0px 0.33em;
}

h3.section-title {
font-family: Amarante,Times New Roman,serif;
font-size: 65px;
margin-bottom: 0px;
text-align: center;
color: #FDF253;
}

.retro {
text-shadow: 3px 3px #000, 3px 2px #FDF253;
}

.gotop {
position: fixed;
right: 2%;
bottom: 2%;
color: #fff;
background-color: #980000;
border: 4px solid #EC0F00;
padding: 10px 17px;
text-decoration: none;
z-index: 100;
font-weight: 600;
opacity: 0.5;
}

.gotop:hover {
opacity: 1;
}

.more_entries_wrap {
max-width: 640px;
float: none !important;
position: relative;
text-align: center;
margin-bottom: 30px !important;
margin-right: auto !important;
margin-left: auto !important;
}

#more_entries_link {
color: #fff;
background-color: #980000;
border: 4px solid #EC0F00;
position: relative;
z-index: 1;
width: auto;
font-size: 17px;
text-align: center;
padding: 10px 15px;
line-height: 2.6;
}

h1 {
color: #F6EDD8;
font-size: 110px;
letter-spacing: 3px;
text-shadow: 3px 3px 0px transparent, 5px 5px 0px #484A4D;
text-align: center;
margin: 0px auto 0px auto;
padding: 0;
}

h1 {
font-family: Amarante,Times New Roman,serif !important;
font-weight: 400;
}

h3,
#show_gb_post_wrap:after,
a[href^="/mitglieder/"] strong {
font-family: Amarante,Times New Roman,serif !important;
font-weight: 400;
}

a[href^="/mitglieder/"] strong {
font-size: 27px;
}

#gb_post_textarea,
a[href^="/mitglieder/"] strong:after,
#gb_posts .gb_post_text:before {
font-family: 'Abel', sans-serif !important;
font-size: 14px !important;
font-weight: 400;
}

#show_gb_post_wrap,
#show_gb_post_wrap:after,
a[href^="/mitglieder/"] strong,
a[href^="/mitglieder/"] strong:after,
#gb_posts .gb_post_text a,
#gb_posts .gb_post_text:before,
#gb_posts .gb_post_text:after,
small,
section:before,
#logo,
.face.back,
.back-inner,
.more_entries_wrap,
nav,
.ctm_main,
section,
h1 {
display: block;
}

a, a:hover,
nav ul#main-nav li, nav ul#main-nav li:hover,
a[href^="/mitglieder/"] strong, a[href^="/mitglieder/"] strong:hover,
.gb_post_text {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none;
}

a:hover,
nav ul#main-nav li:hover,
input#gb_post_submit:hover,
a[href^="/mitglieder/"] strong:hover {
cursor: url('https://static.allmystery.de/upics/7f1bb5_cr_hov.png'), move;
}

.back-inner,
.head {
box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.7);
}

#gb_post_textarea {
box-shadow: 0px 0px 20px 10px rgba(12, 87, 170, 0.8), 0px 0px 20px 10px rgba(13, 33, 57, 0.8);
-webkit-box-shadow: 0px 0px 20px 10px rgba(12, 87, 170, 0.8), 0px 0px 20px 10px rgba(13, 33, 57, 0.8);
-moz-box-shadow: 0px 0px 20px 10px rgba(12, 87, 170, 0.8), 0px 0px 20px 10px rgba(13, 33, 57, 0.8);
-o-box-shadow: 0px 0px 20px 10px rgba(12, 87, 170, 0.8), 0px 0px 20px 10px rgba(13, 33, 57, 0.8);
}

img.bild {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

#gb_posts li a.gb_post_img,
#gb_posts li a.gb_post_img img,
#logo,
.back-inner,
.gotop {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}

img.bild,
#gb_post_textarea,
#more_entries_link {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
}

a[href^="/mitglieder/"] strong,
nav ul#main-nav li a,
nav ul#main-nav li a:hover {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

#show_gb_post_wrap:after {
text-shadow: 1px 1px 0px transparent, 3px 3px 0px #484A4D;
}

.emo_box {
width: 100%;
max-width: 470px;
height: 2em;
padding: 5px;
background: transparent;
display: table;
text-align: center;
margin: 100px auto -10px auto;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5) inset;
}

.emos {
width: 100%;
display: table-cell;
vertical-align: middle;
}

.emo {
width: 20px;
height: 20px;
margin: 0 3px;
font-family: 'Symbola';
font-size: 20px;
font-weight: 600;
display: inline-block;
}

.emo_txt {
margin: 0px 3px 5px 3px;
font-family: 'Abel', sans-serif !important;
font-size: 13px;
font-weight: 400;
display: block;
}

.emo_txt a {
font-size: 13px;
font-weight: 400;
color: #F6EDD8;
}

.emo_txt a:hover {
color: #7AC0C0;
}

.gb_post_text .emo {
font-size: 20px !important;
}

.user_view {
height: 244px;
width: 190px;
margin: 30px 40px 30px 30px !important;
float: none !important;
display: inline-block;
background: transparent url('https://static.allmystery.de/upics/70c748_r2d2_c3po.png') no-repeat center bottom;
padding: 70px 0 0 0;
}

.user_view a img.user_view_pic {
width: 60px !important;
height: 33px !important;
border-radius: 30px 30px 3px 3px;
padding: 0px !important;
border: 1px solid #C8AF8C !important;
margin: 24px 0px 110px -100px !important;
float: none !important;
}

.user_view a {
text-align: center;
width: 190px;
border-radius: 50%;
float: left !important;
font-size: 23px !important;
font-family: Amarante,Times New Roman,serif;
color: rgb(246, 237, 216) !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

.user_view a:hover {
color: #FDF253 !important;
}

.user_view .visited_info {
width: 190px;
font-size: 14px !important;
display: block;
float: left !important;
text-align: center;
margin-top: 0px;
margin-bottom: 30px;
color: #FDF253;
}

a[href^="/mitglieder/"] {

}

/* star wars style */

.starwars {
perspective: 800px;
transform-style: preserve3d;
}

.starwars {
width: 550px;
height: 280px;
margin: 10px auto 0px auto;
position: relative;
text-align: justify;
}

.preline span {
display: inline-block;
}

img {
width: 100%;
}

.star, .wars {
position: absolute;
}

.star {
top: -0.75em;
}

.wars {
bottom: -0.5em;
}

.preline {
font-family: arial, sans-serif;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
width: 550px;
position: absolute;
margin: 123px auto 0 auto;
}

.animated {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.star {
animation: star 10s ease-out infinite;
}

.wars {
animation: wars 10s ease-out infinite;
}

.preline span {
animation: spin-letters 10s linear infinite;
}

.preline {
animation: move-byline 10s linear infinite;
}

@keyframes star {
0% {
opacity: 0;
transform: scale(1.5) translateY(-0.75em);
}

20% {
opacity: 1;
}

89% {
opacity: 1;
transform: scale(1);
}

100% {
opacity: 0;
transform: translateZ(-1000em);
}
}

@keyframes wars {
0% {
opacity: 0;
transform: scale(1.5) translateY(0.5em);
}

20% {
opacity: 1;
}

90% {
opacity: 1;
transform: scale(1);
}

100% {
opacity: 0;
transform: translateZ(-1000em);
}
}

/* FadeIn animation */
@-webkit-keyframes fadeIn {
0% {opacity: 0; color: #000;}
100% {opacity: 1; color: #FBFDFB;}
}

@keyframes fadeIn {
0% {opacity: 0; color: #000;}
100% {opacity: 1; color: #FBFDFB;}
}

.preline {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

/* FadeOut animation */
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}

#title {
position: relative;
width: 800px;
height: 500px;
font-size: 350%;
color: #FDF253;
font-weight: 400;
text-align: justify;
overflow: hidden;
margin: -220px auto 0 auto;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(200px) rotateX(25deg);
-moz-transform: perspective(200px) rotateX(25deg);
-ms-transform: perspective(200px) rotateX(25deg);
-o-transform: perspective(200px) rotateX(25deg);
transform: perspective(200px) rotateX(25deg);
}

#title:after {
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}

#title_content {
position: absolute;
top: 100%;
-webkit-animation: scroll 100s linear 4s infinite;
-moz-animation: scroll 100s linear 4s infinite;
-ms-animation: scroll 100s linear 4s infinite;
-o-animation: scroll 100s linear 4s infinite;
animation: scroll 100s linear 4s infinite;
}

/* animation */
@-webkit-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

@-moz-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

@-ms-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

@-o-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

.tie {
-webkit-animation: fly-tie 17s ease-in-out infinite;
-moz-animation: fly-tie 17s ease-in-out infinite;
-o-animation: fly-tie 17s ease-in-out infinite;
animation: fly-tie 17s ease-in-out infinite;
}

.fly-tie {
width: 170px;
height: 170px;
background-image: url('https://static.allmystery.de/upics/0f7dea_tie.png');
background-repeat: no-repeat;
background-size: 50%;
-webkit-transform: translate(100px, 200px);
-moz-transform: translate(100px, 200px);
-o-transform: translate(100px, 200px);
transform: translate(100px, 200px);
}

@-webkit-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-webkit-keyframes fly-tie {
0% {-webkit-transform: translate(100px, 200px);}
30% {-webkit-transform: translate(400px, 300px) scale(1.8) rotate(-35deg) rotateY(90deg);}
60% {-webkit-transform: translate(600px, 50px) scale(0.6) rotate(360deg);}
85% {-webkit-transform: translate(300px, 220px) scale(1) rotate(15deg);}
95% {-webkit-transform: translate(150px, 80px) scale(0.3) rotate(-360deg) rotateY(180deg);}
100% {-webkit-transform: translate(100px, 200px) rotate(0deg);}
}
@-moz-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-moz-keyframes fly-tie {
0% {-moz-transform: translate(100px, 200px);}
30% {-moz-transform: translate(400px, 300px) scale(1.8) rotate(-35deg) rotateY(90deg);}
60% {-moz-transform: translate(600px, 50px) scale(0.6) rotate(360deg);}
85% {-moz-transform: translate(300px, 220px) scale(1) rotate(15deg);}
95% {-moz-transform: translate(150px, 80px) scale(0.3) rotate(-360deg) rotateY(180deg);}
100% {-moz-transform: translate(100px, 200px) rotate(0deg);}
}
@-o-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-o-keyframes fly-tie {
0% {-o-transform: translate(100px, 200px);}
30% {-o-transform: translate(400px, 300px) scale(1.8) rotate(-35deg) rotateY(90deg);}
60% {-o-transform: translate(600px, 50px) scale(0.6) rotate(360deg);}
85% {-o-transform: translate(300px, 220px) scale(1) rotate(15deg);}
95% {-o-transform: translate(150px, 80px) scale(0.3) rotate(-360deg) rotateY(180deg);}
100% {-o-transform: translate(100px, 200px) rotate(0deg);}
}
@keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@keyframes fly-tie {
0% {transform: translate(100px, 200px);}
30% {transform: translate(400px, 300px) scale(1.8) rotate(-35deg) rotateY(90deg);}
60% {transform: translate(600px, 50px) scale(0.6) rotate(360deg);}
85% {transform: translate(300px, 220px) scale(1) rotate(15deg);}
95% {transform: translate(150px, 80px) scale(0.3) rotate(-360deg) rotateY(180deg);}
100% {transform: translate(100px, 200px) rotate(0deg);}
}

.xwing {
-webkit-animation: fly-xwing 15s ease-in-out infinite;
-moz-animation: fly-xwing 15s ease-in-out infinite;
-o-animation: fly-xwing 15s ease-in-out infinite;
animation: fly-xwing 15s ease-in-out infinite;
}

.fly-xwing {
width: 170px;
height: 170px;
background-image: url('https://static.allmystery.de/upics/a46422_x_wing.png');
background-repeat: no-repeat;
background-size: 50%;
-webkit-transform: translate(100px, 250px);
-moz-transform: translate(100px, 250px);
-o-transform: translate(100px, 250px);
transform: translate(100px, 250px);
}

@-webkit-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-webkit-keyframes fly-xwing {
0% {-webkit-transform: translate(100px, 250px);}
30% {-webkit-transform: translate(450px, 350px) scale(1.8) rotate(35deg) rotateY(90deg);}
60% {-webkit-transform: translate(650px, 100px) scale(0.6) rotate(-360deg);}
85% {-webkit-transform: translate(350px, 270px) scale(1) rotate(-15deg);}
90% {-webkit-transform: translate(200px, 130px) scale(0.3) rotate(360deg) rotateY(180deg);}
100% {-webkit-transform: translate(100px, 250px) rotate(0deg);}
}
@-moz-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-moz-keyframes fly-xwing {
0% {-moz-transform: translate(100px, 250px);}
30% {-moz-transform: translate(450px, 350px) scale(1.8) rotate(35deg) rotateY(90deg);}
60% {-moz-transform: translate(650px, 100px) scale(0.6) rotate(-360deg);}
85% {-moz-transform: translate(350px, 270px) scale(1) rotate(-15deg);}
90% {-moz-transform: translate(200px, 130px) scale(0.3) rotate(360deg) rotateY(180deg);}
100% {-moz-transform: translate(100px, 250px) rotate(0deg);}
}
@-o-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-o-keyframes fly-xwing {
0% {-o-transform: translate(100px, 250px);}
30% {-o-transform: translate(450px, 350px) scale(1.8) rotate(35deg) rotateY(90deg);}
60% {-o-transform: translate(650px, 100px) scale(0.6) rotate(-360deg);}
85% {-o-transform: translate(350px, 270px) scale(1) rotate(-15deg);}
90% {-o-transform: translate(200px, 130px) scale(0.3) rotate(360deg) rotateY(180deg);}
100% {-o-transform: translate(100px, 250px) rotate(0deg);}
}
@keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@keyframes fly-xwing {
0% {transform: translate(100px, 250px);}
30% {transform: translate(450px, 350px) scale(1.8) rotate(35deg) rotateY(90deg);}
60% {transform: translate(650px, 100px) scale(0.6) rotate(-360deg);}
85% {transform: translate(350px, 270px) scale(1) rotate(-15deg);}
90% {transform: translate(200px, 130px) scale(0.3) rotate(360deg) rotateY(180deg);}
100% {transform: translate(100px, 250px) rotate(0deg);}
}

</style>
[url=https://www.allmystery.de]

[IMG]/static/upics/f4991b_jedi_logo_bck2.png" alt=""/>






[ul][li]<a href="#thema1">Thema 1[/url]
[li][url=#thema2]Thema 2[/url]
[li][url=#thema3]Thema 3[/url]
<li style="margin-top:15px;">[url=#thema4]Thema 4[/url]
[li][url=#thema5]Thema 5[/url]
[li][url=#thema6]Thema 6[/url]
[li][url=#memory]Gästebuch[/url]
[/ul]












[objerror=https%3A%2F%2Fstatic.allmystery.de%2Fupics%2F9781fb_bg_2.jpg]Bild nicht mehr verfügbar[/objerror]
[objerror=https%3A%2F%2Fstatic.allmystery.de%2Fupics%2F30445e_bg3.jpg]Bild nicht mehr verfügbar[/objerror]
Möge die Macht mit dir sein, $mbesucher![/size]




Es war einmal vor langer Zeit in einer weit, weit entfernten Galaxis...


"Immer im Gleichgewicht die Waagschalen müssen sein"



"Der Mensch ist nicht prädestiniert dafür, sich nur in Extremen zu bewegen. Zwischen Schwarz und Weiß, Licht und Dunkelheit und Gut und Böse, gibt es auch eine Mitte. Nur derjenige, welcher sich in der Mitte bewegt, befindet sich auf einem wahrhaften Weg"



"Furcht führt zu Wut, Wut führt zu Hass und Hass führt zu unsäglichem Leid"



"Bekämpfe Feuer weder mit Wasser noch ebenso mit Feuer. Neutralisiere nur seinen Brennstoff und es wird verschwinden"



"Das Mögliche ist nur eine Ablenkung, bis es eintrifft"



"Konzentriere dich auf den Moment, nicht auf die Vergangenheit oder die Zukunft. Denn der Moment bestimmt beides"



"Immer der Moment selbst die Ewigkeit ist"



"Bemühen du dich musst, dann Glück du wirst haben"



Meine Zeit hier ist zu Ende. Nehmt, was ich Euch gelehrt habe, und nutzt es wohl.











Thema 1[/size]










Thema 2[/size]










Thema 3[/size]










Thema 4[/size]










Thema 5[/size]












Thema 6[/size]










Gästebuch[/size]








Markieren → kopieren → einfügen:
Bild (ohne *): [*img]URL[/img]
&#128513;
&#128514;
&#128515;
&#128516;
&#128517;
&#128519;
&#128520;
&#128521;
&#128522;
&#128525;
&#128526;
&#128527;
&#128528;
&#128532;
&#128536;
&#128540;
&#128546;
&#128565;
&#128584;
&#128585;
&#128586;








[url=#top]↑[/url]



So long...

S C-2


melden
Anzeige
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

14.02.2016 um 16:40
Sidebar | Blog

Wer für sein Blog eine eigene Sidebar möchte, für den ist dieser Code genau das passande!

sidebar

Durch ein einfach zu händelndes Block System lassen sich beliebig viele Boxen mit den unterschiedlichsten Inhalten füllen und natürlich weiter ausbauen und stylen.

Der Code für einen Hintergrund Sound ist ebenfalls enthalten:
Einfach nur die drei XXX durch die YouTube- ID ersetzen :Y:

Der Code

<style type="text/css">
/* BLOG mit CUSTOM SIDEBAR & SOUND | 14.02.2016 | S_C */

.infoleiste,
iframe.sound {
display: none !important;
}

#blog-entries {
width: 100%;
max-width: 720px;
}

#sidebar {
width: 100%;
max-width: 310px;
position: absolute;
right: 0;
top: 140px;
border: 1px solid #40404C;
background: #2B2B2B;
text-align: left;
box-sizing: border-box;
z-index: 999;
}

.titel {
width: 100%;
max-width: 288px;
padding: 7px 10px;
text-transform: uppercase;
background: #404040;
text-align: left;
clear: both;
}

.inhalt {
width: 100%;
max-width: 288px;
padding: 7px 10px;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
text-align: left;
clear: both;
}

.inhalt img {
width: 100%;
max-width: 288px;
clear: both;
}

a img {
border: solid 1px #40404C;
}

</style>
<iframe class="sound" src="/fcgi/?m=profile&ytid=XXX" frameborder="0" height="0" width="0"></iframe>



<!-- Start Box 1 -->
Blog Links

• [url=https://www.allmystery.de/blogs/s_c/pfirsichmaracujatorte]Pfirsich-Maracuja-Torte[/url]

• [url=https://www.allmystery.de/blogs/s_c/sie_sind_unter_uns__terroristen_in_europa]Terroristen in Europa[/url]

<!-- Ende Box 1 -->

<!-- Start Box 2 -->
Normaler Text

• Text

• Text

• Text


<!-- Ende Box 2 -->

<!-- Start Box 3 -->
Bild

[IMG]/i/t3dfff4b18_div_3E_3Cbr_3E_3C_20Ende_20Box_203_20_3E.jpg[/IMG]Bild Link

[url=https://www.allmystery.de/blogs/s_c/in_loving_memory_dog]
[IMG]/i/t3dc5b096c_b49c15e_kerze_mit_rose_1.jpg[/IMG]
[/url]

<!-- Ende Box 4 -->



Viel Spaß weiterhin!

S C-2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

14.02.2016 um 18:53
Sidebar mit Accordion | Blog

Eine andere Sidebar, diesmal mit einem integrierten Accordion Menü für mehr Inhalt auf weniger Raum:

sidebar accordion

Das Accordion Menü lässt sich selbstverständlich ganz einfach um Register erweitern oder kürzen und mit allen möglichen Inhalten füllen. Bild Links und Video Codes sind als Vorlage zum Eigenbau enthalten und der Code für den Hintergrund Sound ist auch wieder dabei :Y:

Der Code

<style type="text/css">
/* BLOG mit CUSTOM ACCORDION SIDEBAR & SOUND | 14.02.2016 | S_C */

.infoleiste,
.sound {
display: none !important;
}

#blog-entries {
width: 100%;
max-width: 720px;
}

#sidebar {
width: 310px;
position: absolute;
right: 0;
top: 140px;
border: 1px solid #40404C;
background: #2B2B2B;
text-align: left;
box-sizing: border-box;
z-index: 999;
}

#content_ctn {
width: 308px;
margin: 0px auto 0px auto;
text-align: left;
color: #fff;
border-top: solid 1px #000;
position: relative;
overflow: hidden;
}

#content_accordion .content_box {
height: 34px;
float: left;
}

#content_accordion .content_box:hover {
width: 308px;
height: 250px;
}

.content_box {
background: #000;
}

#content_accordion .content_box,
#content_accordion .content_box:hover {
transition: height 0.9s ease-in-out;
-webkit-transition: height 0.9s ease-in-out;
-moz-transition: height 0.9s ease-in-out;
-o-transition: height 0.9s ease-in-out;
}

.c1 {
width: 308px;
height: auto;
padding: 7px 0px 7px 0px;
float: left;
cursor: pointer;
}

.c1 {
color: #fff;
text-transform: uppercase;
background: #40404C;
}

.c1:focus, .c1:hover {
color: #B1B2C9;
}

.titel-links {
margin-left: 10px;
text-align: left;
float: left;
}

.titel-rechts {
margin-right: 10px;
text-right: left;
float: right;
}

.content_text {
height: 200px;
margin: 10px;
text-align: left;
display: inline-block;
overflow-x: hidden;
}

#sidebar p {
padding: 7px 10px;
}

.pic, .video {
padding: 10px;
}

.pic, .video, .mypic, .myvideo {
max-width: 288px;
height: auto;
}

</style>
[youtube]POFBaB0ktmk[/youtube]
<!-- ende inhalt 6 -->


<!-- Ende Box 6 -->



... und hier nat&uuml;rlich auch :Y:
Oder ein Bild oder Video einf&uuml;gen:
[IMG]/i/tb628fee58_bccede1_Mohamed_Elias_680x383.jpg[/IMG]
[youtube]POFBaB0ktmk[/youtube]


So long...

S C-2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

15.02.2016 um 02:14
Double Sidebar & Center Box + Hintergrund Sound | Blog

Wer seinen Leserinnen und Lesern ein Blog mit vielen zusätzlichen Infos präsentieren möchte, für den habe ich diese Version meiner Sidebars geschrieben:

douple sidebar-center bar

Als kleines Highlight in dieser Version:
Das Laufband (marquee) in der linken Sidebar, das auch mit Text und/oder Videos bestückt werden kann!

In Kombination mit den Inhalten meiner vorherigen Sidebars, lässt diese Version wirklich keine Wünsche mehr offen :Y:

Der Code


<style type="text/css">
/* BLOG mit DOUBLE SIDEBAR & SOUND | 15.02.2016 | S_C */

.infoleiste,
iframe.sound {
display: none !important;
}

.main {
margin-right: 0 !important;
}

#blog-entries {
width: 100%;
max-width: 610px;
margin-left: 220px;
}

#post_comment {
max-width: 610px;
left: 220px;
}

#post_comment .poster {
margin: 0px !important;
}

#post_comment #textarea-post_comment {
width: 503px !important;
}

#post_comment #submit-post_comment {
margin: 5px 10px 0 92px !important;
}

#comments .comment {
margin-left: 205px;
}

#comments .usercomment {
max-width: 520px;
}

.footer {
margin-right: 0 !important;
}

#sidebar_li, #sidebar_re {
width: 100%;
max-width: 200px;
position: absolute;
top: 140px;
border: 1px solid #40404C;
background: #2B2B2B;
text-align: left;
box-sizing: border-box;
z-index: 999;
}

#sidebar_re {
right: 0;
}

#sidebar_li {
left: 0;
}

.titel {
width: 100%;
max-width: 178px;
padding: 7px 10px;
text-transform: uppercase;
background: #404040;
text-align: left;
clear: both;
}

.inhalt {
width: 100%;
max-width: 178px;
padding: 7px 10px;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
text-align: left;
clear: both;
}

.inhalt img {
width: 100%;
max-width: 198px;
clear: both;
}

a img {
border: solid 1px #40404C;
}

marquee {
padding: 5px 0px;
border-top: solid 1px #000;
}

marquee img {
max-width: 180px;
padding: 5px 10px;
}

#ctr_box {
width: 100%;
max-width: 588px;
height: 150px;
padding: 10px;
overflow-x: hidden;
background: #2B2B2B;
position: relative;
display: block;
clear: both;
border: solid 1px #40404C;
text-align: left;
}

</style>
<iframe class="sound" frameborder="0" height="0" src="/fcgi/?m=profile&ytid=XXX" width="0"></iframe>




Zum Nachdenken

[objerror]Bild nicht mehr verfügbar[/objerror]
[IMG]/i/t825e6c58d_km.jpg[/IMG]
[IMG]/i/t7371b6f72_km2.jpg[/IMG]
[IMG]/i/tf6bba530e_hg.jpg[/IMG]
[IMG]/i/t7963f6170_hg2.jpg[/IMG]
[IMG]/i/t266d0de01_uv.jpg[/IMG]
[IMG]/i/t789e17420_uv2.jpg[/IMG]





<div id="ctr_box[/IMG]
est sed dolor zzril assum diam qui et nibh ea dolore.
amet enim vulputate nonummy facilisi accusam sit.
euismod diam dolore et.
dolore erat et vel lorem minim ut zzril duis voluptua nulla invidunt.
est sed dolor zzril assum diam qui et nibh ea dolore.
amet enim vulputate nonummy facilisi accusam sit.


<!-- ### SIDEBAR RECHTS ### -->


Blog Links

• [url=https://www.allmystery.de/blogs/s_c/pfirsichmaracujatorte]Pfirsich-Maracuja-Torte[/url]

• [url=https://www.allmystery.de/blogs/s_c/sie_sind_unter_uns__terroristen_in_europa]Terroristen in Europa[/url]




Normaler Text

• Text

• Text

• Text





Bild

[IMG]/i/t2c2f0e2e2_div_3E_3Cbr_3E_3C_20Ende_20Box_203_20_3E.jpg[/IMG]Bild Link

[url=https://www.allmystery.de/blogs/s_c/in_loving_memory_dog]
[IMG]/i/tdf3a452a7_b49c15e_kerze_mit_rose_1.jpg[/IMG]
[/url]





Wünsche uns allen interessante Blogs!

S C-2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

15.02.2016 um 17:51
Sidebar und Center Box + Hintergrund Sound | Profil

Was für das Blog geht, geht natürlich auch für Profile! Hier ein Beispiel:

Sidebar

Die Sidebar lässt sich mit Blocks im Allmy Design bestücken und mit jedem beliebigen Inhalt füllen. Das gleiche gilt auch für die Center Box, deren Höhe sich problemlos verändern lässt.

Der Code

<style type="text/css">
/* CUSTOM SIDEBAR & CENTER CONTENT BOX | 15.02.2016 | S_C */

iframe.sound {
display: none !important;
}

.main {
margin-right: 0 !important;
}

.profile_info {
margin-left: 170px;
}

.profile_pic {
margin-right: 170px !important;
}

h2 {
display: block !important;
text-align: center;
}

#show_gb_post_wrap {
text-align: center;
display: block;
}

#gb_post_wrap {
width: 710px !important;
margin: 0 0 0 170px !important;
}

#gb_post_textarea {
width: 540px !important;
}

#gb_post_submit {
left: 630px !important;
}

ul#gb_posts {
width: 710px !important;
margin: 0 0 10px 170px !important;
}

ul#gb_posts li {
width: 710px !important;
}

#gb_posts .gb_post_text {
width: 640px !important;
}

.more_entries_wrap {
text-align: center;
}

.user_view {
margin: 15px 15px 15px 0 !important;
}

.footer {
width: 100%;
}

.footer hr {
float: left;
}

#sidebar {
width: 160px;
position: absolute;
left: 0;
top: 138px;
font-size: 11px !important;
text-align: left;
background: #000;
box-sizing: border-box;
z-index: 999;
}

.box {
width: 160px;
background: #40404C;
margin-bottom: 17px;
float: left;
clear: both;
}

.titel {
width: 150px;
padding: 4px 5px 4px 5px;
text-transform: uppercase;
background: #404040;
text-align: center;
clear: both;
}

.inhalt {
width: 140px;
padding: 10px;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
text-align: left;
clear: both;
}

.inhalt img {
width: 140px;
clear: both;
}

a img {
border: solid 1px #40404C;
}

#ctr_box {
width: 100%;
max-width: 690px;
height: 150px;
padding: 10px;
overflow-x: hidden;
background: #40404C;
position: relative;
display: block;
clear: both;
border: solid 1px #404040;
text-align: left;
margin: 0px auto 0px auto;
}

</style>
<iframe class="sound" src="/fcgi/?m=profile&ytid=XXX" frameborder="0" height="0" width="0"></iframe>

<!-- ### SIDEBAR ### -->

<!-- Start Box 1 -->

Blog Links

[url=https://www.allmystery.de/blogs/s_c/pfirsichmaracujatorte]Pfirsich-Maracuja-Torte[/url]

[url=https://www.allmystery.de/blogs/s_c/sie_sind_unter_uns__terroristen_in_europa]Terroristen in Europa[/url]


<!-- Ende Box 1 -->

<!-- Start Box 2 -->

Normaler Text

Text

Text

Text



<!-- Ende Box 2 -->

<!-- Start Box 3 -->

Bild

[IMG]/i/td729ecbed_div_3E_3Cbr_3E_3C_20Ende_20Box_203_20_3E.jpg[/IMG]
Bild Link

<a href="https://www.allmystery.de/blogs/s_c/in_loving_memory_dog" title="In loving memory [at_user]dog[/at_user]">
[objerror]Bild nicht mehr verfügbar[/objerror]
est sed dolor zzril assum diam qui et nibh ea dolore.
amet enim vulputate nonummy facilisi accusam sit.
euismod diam dolore et.
dolore erat et vel lorem minim ut zzril duis voluptua nulla invidunt.
est sed dolor zzril assum diam qui et nibh ea dolore.
amet enim vulputate nonummy facilisi accusam sit.


Gutes gelingen :Y:

S C-2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

12.03.2016 um 21:20
Custom Header + Profil Sound + Go top- Button | Profil und Blog

Ein fixierter, aus- und umbaufähiger Header im Allmy Look:

custom header

Der Ava ist animiert und sämtliche Links gefadet.

Der Code


<style type="text/css">

/*
CUSTOM ALLMY MENUE
Author: S_C (https://www.allmystery.de/mitglieder/S_C)
*/

/* allmy off */
.header,
.heart,
.toTop,
iframe.mysong {
display: none !important;
}

/* allmy style */
.userfunction {
width: 1050px;
position: fixed;
background: #000;
z-index: 10000;
top: 0;
height: 30px;
padding-top: 5px;
}

.main {
padding-top: 150px !important;
}

.header {
position: absolute !important;
height: 30px !important;
background-color: transparent !important;
background-image: none !important;
}

#init_quicksearch {
color: #A2ABCC !important;
}

.tabnav {
position: fixed !important;
top: 95px;
width: 1050px;
z-index: 10000;
border-bottom: solid 1px #000;
}

a, form.AsLink button, #logo,
a.info img, a.info img:hover,
.allmylogo, .allmylogo:hover,
.icon a img, .icon a img:hover {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.footer hr {
float: left;
}

/* -----### custom menue ###----- */

.container {
max-width: 860px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}

.head .row {
position: relative;
}

.row {
margin-left: -10px;
margin-right: -10px;
}

.clear:before, .clear:after {
content: "";
display: table;
}

.clear:after {
clear: both;
}

.clear {
zoom: 1;
}

.head {
width: 1050px;
height: 65px;
position: fixed;
top: 30px;
left: 50%;
margin-left: -525px;
background: #2d2d32 url('/images/header_wide.jpg') no-repeat center bottom;
font-size: 12px;
z-index: 10000;
}

#logo {
width: 80px;
height: 80px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -40px;
z-index: 1;
}

#logo:hover {
-webkit-animation: logo 6s infinite linear;
animation: logo 6s infinite linear;
z-index: 20000;
}

@-webkit-keyframes logo {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes logo {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

a.info {
width: 40px;
height: 40px;
color: #A2ABCC;
background-color: transparent;
position: relative;
font-size: 11px;
text-align: center;
margin: 11px 3px 0 3px;
display: inline-block;
border: solid 1px #A2ABCC;
z-index: 1;
}

a.info img:hover, .allmylogo:hover,
.icon a img:hover {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
z-index: 2;
}

a.info img {
width: 20px;
height: 20px;
margin: 10px;
}

a.info span {
color: #fff;
text-transform: uppercase;
padding: 0;
font-size: 11px;
background: #2D2D32;
border: solid 1px #000;
line-height: 30px;
display: none;
}

a.info:hover span {
position: absolute;
bottom: 47px;
left: -55px;
width: 150px;
text-align: center;
display: block;
z-index: 9999;
}

#top {
position: absolute;
top: 0;
left: 0;
}

.gotop {
width: 40px;
height: 40px;
position: fixed;
right: 2%;
bottom: 2%;
color: #fff;
background-color: #000;
border: 1px solid #A2ABCC;
text-decoration: none;
z-index: 100;
font-weight: 600;
opacity: 0.5;
line-height: 35px;
text-align: center;
}

.gotop:hover {
opacity: 1;
}

#logo img, a.info, .gotop {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}

</style>
[url=https://www.allmystery.de]
[IMG]/static/uploads/1b46b76465e45af0_154597.png[/IMG][/url]


<!-- Links: USERNAME & USER-ID ersetzen -->
<nav role="navigation">
[url=https://www.allmystery.de/pn/USERNAME]
[IMG]/static/upics/9c4de4_pn.png" alt="PN an USERNAME" />
<span>PN an USERNAME[/url]

[url=https://www.allmystery.de/blogs/USERNAME%5B/IMG%5D<br][IMG]/static/upics/1a2332_myblog.png">
<span>USER's Blog[/url]

[url="https://www.allmystery.de/fcgi/?m=threads_user&user=USER-ID%5B/IMG%5D<br][IMG]/static/upics/e400e7_mydisk.png">
<span>USER's Threads[/url]

[url="https://www.allmystery.de/ena/%5B/IMG%5D<br][IMG]/static/upics/547ae9_ena.png">
<span>Echtzeit[/url]

[url="https://www.allmystery.de/themen/][IMG]/static/upics/7d49e9_diskussion.png" alt="Diskussionen" />
<span>Diskussionen[/url]

[url=https://www.allmystery.de/artikel/][IMG]/static/upics/26507b_artikel.png" alt="Artikel" />
<span>Artikel[/url]

[url="https://www.allmystery.de/blogs/%5B/IMG%5D<br][IMG]/static/upics/a5637c_blog.png">
<span>Blogs[/url]

[url="https://www.allmystery.de/stats/%5B/IMG%5D<br][IMG]/static/upics/425e42_stats.png">
<span>Statistiken[/url]

[url="https://www.allmystery.de/chat/%5B/IMG%5D<br][IMG]/static/upics/355a0c_chat.png">
<span>Chat[/url]

[url="https://www.allmystery.de/wiki/%5B/IMG%5D<br][IMG]/static/upics/19ecc0_wiki.png">
<span>Wiki[/url]
</nav>




<a href="#top" class="gotop" title="nach oben[/IMG]↑


Viele Grüße...

S C-2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

26.06.2016 um 01:50
Star Wars | Profil Theme Basic | Relaunch

Das frisch überholte Theme mit neuen, ausschließlich per CSS animierten Effekten, netten Details und Star Wars Sound:

SW1

SW2

SW3

Der Code:
(27.099 Zeichen CSS, 7.985 Zeichen HTML)

<style type="text/css">

/* ---------------------------
STAR WARS BASIC THEME
Author: S_C (https://www.allmystery.de/mitglieder/S_C)
Date: 03.02.2016
Relaunch: 26.06.2016
------------------------------- */

/* ----- ### allmy style ### ----- */

/* allmy off */
.userfunction,
.header,
.tabnav,
.head_links,
.profile_links,
.profile_pic,
.profile_info,
.infoleiste,
#moreMenu,
center,
.gb_post_usericon,
h2,
.footer,
.videoWrapper,
iframe,
#more_entries_loading_img,
#show_gb_post_wrap {
display: none !important;
}

/* allmy on */
.profile_posts, .hidden {
display: block !important;
}

html {
cursor: url('https://static.allmystery.de/upics/73c049_cr.png'), move;
}

body {
font-family: 'Oswald', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #FDF253 !important;
padding-top: 0px !important;
background-color: #000;
background-image: url('https://static.allmystery.de/upics/71e8d4_bg.jpg') !important;
background-repeat: repeat !important;
background-position: center top !important;
background-attachment: fixed !important;
background-size: cover !important;
}

.page {
width: 100% !important;
max-width: 3000px !important;
min-width: 0px !important;
margin: 0px auto;
padding: 0;
background: transparent;
line-height: 1.5;
}

.main {
width: 100% !important;
max-width: 100% !important;
padding-top: 0px !important;
padding-left: 0px !important;
margin-right: auto !important;
margin-left: auto;
text-align: center;
background: transparent;
}

#show_gb_post_wrap {
font-size: 40px;
color: transparent;
position: relative;
margin: -280px auto 0 auto;
width: 350px;
text-align: center;
visibility: hidden;
}

#show_gb_post_wrap:after {
content: "Eintrag verfassen";
margin: -120px auto 30px auto;
width: 350px;
text-align: center;
visibility: visible;
text-decoration: none;
font-size: 40px;
color: #F6EDD8;
}

ul#gb_posts {
width: 960px !important;
margin: 180px auto 50px auto !important;
position: relative !important;
text-align: center;
}

ul#gb_posts li {
margin-bottom: 20px !important;
width: 450px !important;
margin: 0 15px;
padding-top: 20px;
}

#gb_posts li a.gb_post_img {
width: 150px !important;
height: 150px !important;
text-align: center;
padding: 69px 0px 0px 0px !important;
margin: 0px auto 10px auto !important;
position: relative !important;
display: block !important;
float: none !important;
background: url('https://static.allmystery.de/upics/c9c93a_jedi_logo2.png') no-repeat center;
opacity: 0.7;
}

#gb_posts li a.gb_post_img img {
width: 60px !important;
height: 60px !important;
border: 2px solid #DE2101 !important;
-webkit-animation: postimgimg 5s infinite linear;
animation: postimgimg 5s infinite linear;
}

@-webkit-keyframes postimgimg {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes postimgimg {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

#gb_posts li a.gb_post_img:hover {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
box-shadow: none;
}

#gb_posts li a.gb_post_img:hover + .gb_post_text {
display: block;
-webkit-animation: fadein 400ms;
-moz-animation: fadein 400ms;
-ms-animation: fadein 400ms;
-o-animation: fadein 400ms;
animation: fadein 400ms;
}

.gb_post_text {
display: none;
}

#gb_posts .gb_post_text {
float: none !important;
position: relative;
width: 430px;
font-size: 15px;
background: #000;
padding: 10px;
margin: 40px auto 0px auto;
line-height: 1.2;
opacity: 0.7;
clear: both;
}

@keyframes fadein {
from { opacity: 0; transform: scale(0.01); }
to { opacity: 0.7; transform: scale(1); }
}
@-moz-keyframes fadein {
from { opacity: 0; transform: scale(0.01); }
to { opacity: 0.7; transform: scale(1); }
}
@-webkit-keyframes fadein {
from { opacity: 0; transform: scale(0.01); }
to { opacity: 0.7; transform: scale(1); }
}
@-ms-keyframes fadein {
from { opacity: 0; transform: scale(0.01); }
to { opacity: 0.7; transform: scale(1); }
}
@-o-keyframes fadein {
from { opacity: 0; transform: scale(0.01); }
to { opacity: 0.7; transform: scale(1); }
}

img.bild {
width: 100%;
max-width: 300px !important;
z-index: 1 !important;
position: relative !important;
margin: 20px auto !important;
display: block !important;
border: 4px solid #F6EDD8;
background-color: #F6EDD8;
font-size: 0;
}

#gb_post_wrap {
width: 470px !important;
height: 70px !important;
margin: 0px auto 120px auto !important;
}

#gb_post_textarea {
max-width: 50px;
padding: 10px !important;
min-height: 50px !important;
border: 1px solid #fff !important;
height: 50px !important;
font-family: 'Oswald', sans-serif !important;
font-size: 14px !important;
font-weight: 400;
width: 100% !important;
position: relative !important;
margin: 0px auto 30px auto !important;
display: block !important;
left: 0 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: linear-gradient(130deg, #2B4956, #7AC0C0, #E6E1D0, #E68966, #E8CAAF, #FACB3D, #2DCC70);
background-size: 1000% 1000%;
-webkit-animation: gbfield 20s ease infinite;
-moz-animation: gbfield 20s ease infinite;
animation: gbfield 20s ease infinite;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
z-index: 1;
}

#gb_post_textarea:hover {
min-height: 135px !important;
height: 120px !important;
width: 100% !important;
max-width: 470px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
}

@-webkit-keyframes gbfield {
0% { background-position:0% 50% }
50% { background-position:100% 50% }
100% { background-position:0% 50% }
}
@-moz-keyframes gbfield {
0% { background-position:0% 50% }
50% { background-position:100% 50% }
100% { background-position:0% 50% }
}
@keyframes gbfield {
0% { background-position:0% 50% }
50% { background-position:100% 50% }
100% { background-position:0% 50% }
}

input#gb_post_submit {
height: 145px;
width: 150px;
top: -80px !important;
left: 160px;
color: transparent !important;
font-size: 0px !important;
border: none !important;
background: url("https://static.allmystery.de/upics/c9c93a_jedi_logo2.png");
}

input#gb_post_submit:hover {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}

a[href^="/mitglieder/"] strong {
color: #F6EDD8 !important;
line-height: normal;
margin: 0px;
}

a[href^="/mitglieder/"] strong:hover,
a[href^="/register/"]:hover:before {
color: #FDF253 !important;
}

a[href^="/mitglieder/"] strong:after {
content:" schrieb";
font-family: 'Oswald', sans-serif !important;
color: #fff !important;
font-size: 14px;
text-shadow: none;
text-transform: none;
margin-top: 10px;
}

#gb_posts .gb_post_text a {
color: #383a3c !important;
font-size: 14px;
width: 220px;
margin: 0 auto;
}

#gb_posts .gb_post_text:before {
content:"";
color: #383a3c !important;
margin: 0px;
}

#gb_posts .gb_post_text:after {
content:"- Danke. Möge die Macht mit dir sein! -";
font-family: 'Oswald', sans-serif !important;
font-weight: 400;
color: #C11700 !important;
font-size: 14px;
margin-top: 20px;
}

small {
color: #D35244;
}

.delete_gb_entry {
color: #D35244 !important;
display: inline-block !important;
}

a:hover {
color: #2B4956;
}

.uicons {
line-height: 17px !important;
transform: scale(1.3);
margin: 0 3px;
}

/* -----### star wars layout ###----- */
* {
box-sizing: border-box;
}

#mobile {
display: none !important;
}

.head {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
left: 0;
background-image: url('https://static.allmystery.de/upics/58509a_bg_menue.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: scroll;
border-bottom: solid 1px #0B3565;
z-index: 10000;
}

.container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}

.head .row {
position: relative;
}

.row {
padding-top: 1em;
padding-bottom: 1em;
margin-left: -10px;
margin-right: -10px;
}

nav ul, nav ol {
list-style: outside none none;
padding: 0px;
}

.clear:before, .clear:after {
content: "";
display: table;
}

.clear:after {
clear: both;
}

.clear {
zoom: 1;
}

#thema1, #thema2, #thema3, #thema4, #thema5, #thema6, #memory {
border-top: solid 1px #0B3565;
}

section:before {
content: " ";
margin-top: -100px;
height: 170px;
visibility: hidden;
}

#logo {
width: 150px;
height: 150px;
position: absolute;
top: -100px;
left: 50%;
margin-left: -75px;
z-index: 20;
perspective: 1000;
-webkit-transition: all 2.0s ease-in-out;
-moz-transition: all 2.0s ease-in-out;
-o-transition: all 2.0s ease-in-out;
transition: all 2.0s ease-in-out;
}

#logo:hover {
top: 15px;
background-color: #000;
-webkit-transition: all 2.0s ease-in-out;
-moz-transition: all 2.0s ease-in-out;
-o-transition: all 2.0s ease-in-out;
transition: all 2.0s ease-in-out;
}

#flip_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transition: all 2.0s linear;
-moz-transition: all 2.0s linear;
-o-transition: all 2.0s linear;
transition: all 2.0s linear;
}

#logo:hover #flip_card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.face.back {
transform: rotateY(180deg);
color: #fff;
text-align: center;
}

.back-inner {
width: 150px;
height: 150px;
text-align: center;
margin: 0 auto;
background-color: #000;
background-image: url('https://static.allmystery.de/upics/b6f553_heartbeat2.gif');
background-repeat: no-repeat;
background-position: center 73%;
}

.front img {
max-width: 150px;
border-radius: 50%;
cursor: pointer;
}

.back-inner img {
max-width: 150px;
border-radius: 50%;
cursor: pointer;
}

nav ul#main-nav {
margin: 0px;
}

nav ul#main-nav li {
width: 14.2%;
text-align: center;
float: left;
display: inline-block;
padding: 0px 15px;
}

a.info {
width: 100px;
height: 100px;
color: #FDF253;
background-color: transparent;
position: relative;
font-size: 11px;
text-align: center;
margin: 0;
display: inline-block;
z-index: 1;
}

a.info img {
width: 100px;
height: 100px;
}

a.info span {
color: #FDF253;
text-transform: uppercase;
padding: 10px;
font-size: 13px;
background: #000;
border: solid 1px #FF1111;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
display: none;
}

a.info:hover span {
position: absolute;
bottom: -60px;
left: -25px;
width: 150px;
text-align: center;
display: block;
z-index: 9999;
opacity: 0.7;
}

.ctm_main {
padding-top: 50px;
}

.section-inner {
overflow: hidden;
padding: 30px 0px;
background: transparent;
position: relative;
z-index: 0;
}

h3, .h3 {
font-size: 30px;
}

h3 {
line-height: normal;
margin: 0px 0px 0.33em;
}

h3.section-title {
font-size: 65px;
margin-bottom: 0px;
text-align: center;
color: #FDF253;
background: url('https://static.allmystery.de/upics/e17b24_sword2.png') no-repeat center bottom;
height: 90px;
}

.retro {
text-shadow: 3px 3px #000, 3px 2px #FDF253;
}

.gotop {
position: fixed;
right: 2%;
bottom: 3%;
color: #fff;
background-color: #980000;
border: 4px solid #EC0F00;
padding: 10px 17px;
text-decoration: none;
z-index: 100;
font-weight: 600;
opacity: 0.5;
}

.gotop:hover {
opacity: 1;
}

.more_entries_wrap {
max-width: 640px;
float: none !important;
position: relative;
text-align: center;
margin-bottom: 30px !important;
margin-right: auto !important;
margin-left: auto !important;
}

#more_entries_link {
color: #fff;
background-color: #980000;
border: 4px solid #EC0F00;
position: relative;
z-index: 1;
width: auto;
font-size: 17px;
text-align: center;
padding: 10px 15px;
line-height: 2.6;
opacity: 0.5;
}

#more_entries_link:hover {
opacity: 1;
}

h1 {
color: #F6EDD8;
font-size: 110px;
letter-spacing: 3px;
text-shadow: 3px 3px 0px transparent, 5px 5px 0px #484A4D;
text-align: center;
margin: 0px auto 0px auto;
padding: 0;
}

h1 {
font-weight: 400;
}

h3,
#show_gb_post_wrap:after,
a[href^="/mitglieder/"] strong {
font-weight: 400;
}

a[href^="/mitglieder/"] strong {
font-size: 27px;
}

a[href^="/mitglieder/"] strong:after,
#gb_posts .gb_post_text:before {
font-family: 'Oswald', sans-serif !important;
font-size: 14px !important;
font-weight: 400;
}

#show_gb_post_wrap,
#show_gb_post_wrap:after,
a[href^="/mitglieder/"] strong,
a[href^="/mitglieder/"] strong:after,
#gb_posts .gb_post_text a,
#gb_posts .gb_post_text:before,
#gb_posts .gb_post_text:after,
small,
section:before,
#logo,
.face.back,
.back-inner,
.more_entries_wrap,
nav,
.ctm_main,
section,
h1 {
display: block;
}

a, a:hover,
nav ul#main-nav li, nav ul#main-nav li:hover,
a[href^="/mitglieder/"] strong, a[href^="/mitglieder/"] strong:hover,
#more_entries_link, #more_entries_link:hover,
input#gb_post_submit, input#gb_post_submit:hover,
.emo, .emo:hover,
a[href^="/register/"]:before, a[href^="/register/"]:hover:before,
#gb_post_textarea, #gb_post_textarea:hover,
#main-nav li a img, #main-nav li a img:hover {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
text-decoration: none;
}

a:hover,
nav ul#main-nav li:hover,
input#gb_post_submit:hover,
a[href^="/mitglieder/"] strong:hover {
cursor: url('https://static.allmystery.de/upics/7f1bb5_cr_hov.png'), move;
}

.back-inner,
.head {
box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.7);
}

#gb_post_textarea,
#gb_posts .gb_post_text,
.gotop:hover,
#gb_posts li a.gb_post_img,
a.info:hover,
input#gb_post_submit,
#bg_footer span {
box-shadow: 0px 0px 20px 10px rgba(12, 87, 170, 0.8), 0px 0px 20px 10px rgba(13, 33, 57, 0.8);
-webkit-box-shadow: 0px 0px 20px 10px rgba(12, 87, 170, 0.8), 0px 0px 20px 10px rgba(13, 33, 57, 0.8);
-moz-box-shadow: 0px 0px 20px 10px rgba(12, 87, 170, 0.8), 0px 0px 20px 10px rgba(13, 33, 57, 0.8);
-o-box-shadow: 0px 0px 20px 10px rgba(12, 87, 170, 0.8), 0px 0px 20px 10px rgba(13, 33, 57, 0.8);
}

img.bild {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

#gb_posts li a.gb_post_img,
#gb_posts li a.gb_post_img img,
#logo,
.back-inner,
.gotop,
.info,
input#gb_post_submit {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}

img.bild,
#more_entries_link,
#gb_posts .gb_post_text,
nav ul#main-nav li a span {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
}

a[href^="/mitglieder/"] strong,
nav ul#main-nav li a,
nav ul#main-nav li a:hover {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

#show_gb_post_wrap:after {
text-shadow: 1px 1px 0px transparent, 3px 3px 0px #484A4D;
}

.emo_box {
width: 100%;
max-width: 470px;
height: 2em;
padding: 5px;
background: transparent;
display: table;
text-align: center;
margin: 10px auto -10px auto;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5) inset;
}

.emos {
width: 100%;
display: table-cell;
vertical-align: middle;
}

.emo {
width: 20px;
height: 20px;
margin: 0 3px;
font-family: 'Symbola';
font-size: 20px;
font-weight: 600;
display: inline-block;
opacity: 0.7;
}

.emo:hover {
opacity: 1;
}

.emo_txt {
margin: 0px 3px 5px 3px;
font-family: 'Oswald', sans-serif !important;
font-size: 13px;
font-weight: 400;
display: block;
}

.emo_txt a {
font-size: 13px;
font-weight: 400;
color: #F6EDD8;
}

.emo_txt a:hover {
color: #7AC0C0;
}

.gb_post_text .emo {
font-size: 20px !important;
}

.user_view {
height: 244px;
width: 190px;
margin: 100px 40px 0px 30px !important;
float: none !important;
display: inline-block;
background: transparent url('https://static.allmystery.de/upics/70c748_r2d2_c3po.png') no-repeat center bottom;
padding: 70px 0 0 0;
opacity: 0.6;
}

.user_view a img.user_view_pic {
width: 60px !important;
height: 33px !important;
border-radius: 30px 30px 3px 3px;
padding: 0px !important;
border: 1px solid #C8AF8C !important;
margin: 24px 0px 110px -100px !important;
float: none !important;
}

.user_view a {
text-align: center;
width: 190px;
border-radius: 50%;
float: left !important;
font-size: 17px !important;
color: #C11700 !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

.user_view a:hover {
color: #FDF253 !important;
}

.user_view .visited_info {
width: 190px;
font-size: 13px !important;
font-weight: 600;
text-align: center;
margin-top: 0px;
margin-bottom: 20px;
color: #f6edd8;
letter-spacing: 1px;
display: block;
float: left !important;
}

.user_view .visited_info:before {
content:"hier war:";
text-transform: none;
color: #FDF253;
font-weight: 400;
display: block;
}

.user_view .visited_info:after {
content:"Wiederkehren du darfst!";
text-transform: none;
color: #FDF253;
font-weight: 400;
display: block;
}

/* star wars style */

.starwars {
perspective: 800px;
transform-style: preserve3d;
}

.starwars {
width: 550px;
height: 280px;
margin: 10px auto 0px auto;
position: relative;
text-align: justify;
}

.preline span {
display: inline-block;
}

img {
width: 100%;
}

.star, .wars {
position: absolute;
}

.star {
top: -0.75em;
}

.wars {
bottom: -0.5em;
}

.preline {
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
width: 550px;
position: absolute;
margin: 123px auto 0 auto;
}

.animated {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.star {
animation: star 10s ease-out infinite;
}

.wars {
animation: wars 10s ease-out infinite;
}

.preline span {
animation: spin-letters 10s linear infinite;
}

.preline {
animation: move-byline 10s linear infinite;
}

@keyframes star {
0% {
opacity: 0;
transform: scale(1.5) translateY(-0.75em);
}

20% {
opacity: 1;
}

89% {
opacity: 1;
transform: scale(1);
}

100% {
opacity: 0;
transform: translateZ(-1000em);
}
}

@keyframes wars {
0% {
opacity: 0;
transform: scale(1.5) translateY(0.5em);
}

20% {
opacity: 1;
}

90% {
opacity: 1;
transform: scale(1);
}

100% {
opacity: 0;
transform: translateZ(-1000em);
}
}

/* FadeIn animation */
@-webkit-keyframes fadeIn {
0% {opacity: 0; color: #000;}
100% {opacity: 1; color: #FBFDFB;}
}

@keyframes fadeIn {
0% {opacity: 0; color: #000;}
100% {opacity: 1; color: #FBFDFB;}
}

.preline {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

/* FadeOut animation */
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}

#title {
position: relative;
width: 800px;
height: 500px;
font-size: 350%;
color: #FDF253;
font-weight: 400;
text-align: justify;
overflow: hidden;
margin: -220px auto 0 auto;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(200px) rotateX(25deg);
-moz-transform: perspective(200px) rotateX(25deg);
-ms-transform: perspective(200px) rotateX(25deg);
-o-transform: perspective(200px) rotateX(25deg);
transform: perspective(200px) rotateX(25deg);
}

#title:after {
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 10%;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}

#title_content {
position: absolute;
top: 100%;
-webkit-animation: scroll 100s linear 4s infinite;
-moz-animation: scroll 100s linear 4s infinite;
-ms-animation: scroll 100s linear 4s infinite;
-o-animation: scroll 100s linear 4s infinite;
animation: scroll 100s linear 4s infinite;
}

/* animation */
@-webkit-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

@-moz-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

@-ms-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

@-o-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}

.tie {
-webkit-animation: fly-tie 17s ease-in-out infinite;
-moz-animation: fly-tie 17s ease-in-out infinite;
-o-animation: fly-tie 17s ease-in-out infinite;
animation: fly-tie 17s ease-in-out infinite;
}

.fly-tie {
width: 170px;
height: 170px;
background-image: url('https://static.allmystery.de/upics/0f7dea_tie.png');
background-repeat: no-repeat;
background-size: 50%;
-webkit-transform: translate(100px, 200px);
-moz-transform: translate(100px, 200px);
-o-transform: translate(100px, 200px);
transform: translate(100px, 200px);
}

@-webkit-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-webkit-keyframes fly-tie {
0% {-webkit-transform: translate(100px, 200px);}
30% {-webkit-transform: translate(400px, 300px) scale(1.8) rotate(-35deg) rotateY(90deg);}
60% {-webkit-transform: translate(600px, 50px) scale(0.6) rotate(360deg);}
85% {-webkit-transform: translate(300px, 220px) scale(1) rotate(15deg);}
95% {-webkit-transform: translate(150px, 80px) scale(0.3) rotate(-360deg) rotateY(180deg);}
100% {-webkit-transform: translate(100px, 200px) rotate(0deg);}
}
@-moz-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-moz-keyframes fly-tie {
0% {-moz-transform: translate(100px, 200px);}
30% {-moz-transform: translate(400px, 300px) scale(1.8) rotate(-35deg) rotateY(90deg);}
60% {-moz-transform: translate(600px, 50px) scale(0.6) rotate(360deg);}
85% {-moz-transform: translate(300px, 220px) scale(1) rotate(15deg);}
95% {-moz-transform: translate(150px, 80px) scale(0.3) rotate(-360deg) rotateY(180deg);}
100% {-moz-transform: translate(100px, 200px) rotate(0deg);}
}
@-o-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-o-keyframes fly-tie {
0% {-o-transform: translate(100px, 200px);}
30% {-o-transform: translate(400px, 300px) scale(1.8) rotate(-35deg) rotateY(90deg);}
60% {-o-transform: translate(600px, 50px) scale(0.6) rotate(360deg);}
85% {-o-transform: translate(300px, 220px) scale(1) rotate(15deg);}
95% {-o-transform: translate(150px, 80px) scale(0.3) rotate(-360deg) rotateY(180deg);}
100% {-o-transform: translate(100px, 200px) rotate(0deg);}
}
@keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@keyframes fly-tie {
0% {transform: translate(100px, 200px);}
30% {transform: translate(400px, 300px) scale(1.8) rotate(-35deg) rotateY(90deg);}
60% {transform: translate(600px, 50px) scale(0.6) rotate(360deg);}
85% {transform: translate(300px, 220px) scale(1) rotate(15deg);}
95% {transform: translate(150px, 80px) scale(0.3) rotate(-360deg) rotateY(180deg);}
100% {transform: translate(100px, 200px) rotate(0deg);}
}

.xwing {
-webkit-animation: fly-xwing 15s ease-in-out infinite;
-moz-animation: fly-xwing 15s ease-in-out infinite;
-o-animation: fly-xwing 15s ease-in-out infinite;
animation: fly-xwing 15s ease-in-out infinite;
}

.fly-xwing {
width: 170px;
height: 170px;
background-image: url('https://static.allmystery.de/upics/a46422_x_wing.png');
background-repeat: no-repeat;
background-size: 50%;
-webkit-transform: translate(100px, 250px);
-moz-transform: translate(100px, 250px);
-o-transform: translate(100px, 250px);
transform: translate(100px, 250px);
}

@-webkit-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-webkit-keyframes fly-xwing {
0% {-webkit-transform: translate(100px, 250px);}
30% {-webkit-transform: translate(450px, 350px) scale(1.8) rotate(35deg) rotateY(90deg);}
60% {-webkit-transform: translate(650px, 100px) scale(0.6) rotate(-360deg);}
85% {-webkit-transform: translate(350px, 270px) scale(1) rotate(-15deg);}
90% {-webkit-transform: translate(200px, 130px) scale(0.3) rotate(360deg) rotateY(180deg);}
100% {-webkit-transform: translate(100px, 250px) rotate(0deg);}
}
@-moz-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-moz-keyframes fly-xwing {
0% {-moz-transform: translate(100px, 250px);}
30% {-moz-transform: translate(450px, 350px) scale(1.8) rotate(35deg) rotateY(90deg);}
60% {-moz-transform: translate(650px, 100px) scale(0.6) rotate(-360deg);}
85% {-moz-transform: translate(350px, 270px) scale(1) rotate(-15deg);}
90% {-moz-transform: translate(200px, 130px) scale(0.3) rotate(360deg) rotateY(180deg);}
100% {-moz-transform: translate(100px, 250px) rotate(0deg);}
}
@-o-keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@-o-keyframes fly-xwing {
0% {-o-transform: translate(100px, 250px);}
30% {-o-transform: translate(450px, 350px) scale(1.8) rotate(35deg) rotateY(90deg);}
60% {-o-transform: translate(650px, 100px) scale(0.6) rotate(-360deg);}
85% {-o-transform: translate(350px, 270px) scale(1) rotate(-15deg);}
90% {-o-transform: translate(200px, 130px) scale(0.3) rotate(360deg) rotateY(180deg);}
100% {-o-transform: translate(100px, 250px) rotate(0deg);}
}
@keyframes infinite-image {
0% { left:0;}
100% { left: -100%;}
}
@keyframes fly-xwing {
0% {transform: translate(100px, 250px);}
30% {transform: translate(450px, 350px) scale(1.8) rotate(35deg) rotateY(90deg);}
60% {transform: translate(650px, 100px) scale(0.6) rotate(-360deg);}
85% {transform: translate(350px, 270px) scale(1) rotate(-15deg);}
90% {transform: translate(200px, 130px) scale(0.3) rotate(360deg) rotateY(180deg);}
100% {transform: translate(100px, 250px) rotate(0deg);}
}

#bg_footer {
width: 100%;
height: 750px;
position: absolute;
bottom: -70px;
padding-top: 350px;
background-image: url('https://static.allmystery.de/upics/6a5d4e_bg_footer.jpg');
background-attachment: scroll;
background-position: center bottom;
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.35;
z-index: -1;
}

#bg_footer span {
opacity: 1 !important;
}

.sword {
width: 400px;
height: 400px;
transform-origin: 100% center;
position: absolute;
top: 6240px;
margin-left: -400px;
left: 50%;
animation: rotate 3s linear infinite;
}

.sword:before {
content:"";
position: absolute;
height: 100%;
width: 100%;
background: url('https://static.allmystery.de/upics/f8ca80_sword.png') no-repeat center;
animation: rotate 0.5s linear reverse infinite;
}

@keyframes rotate {
100% { transform: rotateX(-360deg) rotateZ(-360deg) scale(1.2); }
}

a[href^="/register/"] {
font-size: 23px !important;
color: #F6EDD8 !important;
visibility: hidden;
}

a[href^="/register/"]:before {
content: ""Zum eintragen anmelden oder registrieren du dich musst";
font-size: 16px !important;
color: #C11700 !important;
visibility: visible;
}

#more_entries_link {
color: #FDF253;
}

#more_entries_link:after {
content:" dir lassen hier du kannst";
}

</style>
[url=https://www.allmystery.de]Allmystery[/url]



[IMG]/i/t2b4cf2c8c_c9c93a_jedi_logo2.png[/IMG]


[url=https://www.allmystery.de]

[IMG]/i/tdc5911f05_f4991b_jedi_logo_bck2.png[/IMG]

[/url]




<ul class="clear" id="main-nav">

[li]
[url=#thema1]
[IMG]/i/t41fd7a9bd_1d653c_li_1.png[/IMG]
<span>Thema 1[/url]


[li]
[url=#thema2]
[IMG]/i/t2d60ad72a_1bd7af_li_2.png[/IMG]
<span>Thema 2[/url]


[li]
[url=#thema3]
[IMG]/i/t57e0ab04d_2fc3a8_li_3.png[/IMG]
<span>Thema 3[/url]


<li style="margin-top:45px;">
[url=#thema4]
[IMG]/i/tc25227130_d38999_li_4.png[/IMG]
<span>Thema 4[/url]


[li]
[url=#thema5]
[IMG]/i/tc10ce3c9e_2d7734_li_5.png[/IMG]
<span>Thema 5[/url]


[li]
[url=#thema6]
[IMG]/i/tfbf99d115_424f47_li_6.png[/IMG]
<span>Thema 6[/url]


[li]
[url=#memory]
[IMG]/i/td3825ef9e_54ba32_li_7.png[/IMG]
<span>Gästebuch[/url]


[/ul]












[IMG]/i/t65569a3ac_star.svg.jpg[/IMG]
[IMG]/i/t9058dc57d_wars.svg.jpg[/IMG]
Willkommen bei S_C du bist, $mbesucher![/size]




Es war einmal vor langer Zeit in einer weit, weit entfernten Galaxis...


"Immer im Gleichgewicht die Waagschalen müssen sein"



"Der Mensch ist nicht prädestiniert dafür, sich nur in Extremen zu bewegen. Zwischen Schwarz und Weiß, Licht und Dunkelheit und Gut und Böse, gibt es auch eine Mitte. Nur derjenige, welcher sich in der Mitte bewegt, befindet sich auf einem wahrhaften Weg"



"Furcht führt zu Wut, Wut führt zu Hass und Hass führt zu unsäglichem Leid"



"Bekämpfe Feuer weder mit Wasser noch ebenso mit Feuer. Neutralisiere nur seinen Brennstoff und es wird verschwinden"



"Das Mögliche ist nur eine Ablenkung, bis es eintrifft"



"Konzentriere dich auf den Moment, nicht auf die Vergangenheit oder die Zukunft. Denn der Moment bestimmt beides"



"Immer der Moment selbst die Ewigkeit ist"



"Bemühen du dich musst, dann Glück du wirst haben"



Meine Zeit hier ist zu Ende. Nehmt, was ich Euch gelehrt habe, und nutzt es wohl.











Thema 1[/size]










Thema 2[/size]










Thema 3[/size]










Thema 4[/size]










Thema 5[/size]












Thema 6[/size]










Gästebuch[/size]
TUE ES ODER TUE ES NICHT. ES GIBT KEIN VERSUCHEN








Markieren und in das Textfeld ziehen du musst:
Bild (ohne *): [*img]URL[/img]
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?










[url=#top]↑[/url]

<span>[b]- EUCH LEBEND ZU SEHEN MEIN HERZ AUF'S WÄRMSTE ERFREUT! -[/b]


Wer nur einzelne Animationen oder Elemente nutzen möchte, einfach melden :Y:

Bis dann...

b10b15 S C 2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

15.07.2016 um 01:18
Fotoshow Lightbox | Profile

Jeder kennt die Fotoshows, bei denen der Hintergrund abgedunkelt bzw. leicht transparent geschaltet wird und dabei das vergrößerte Vorschaubildchen in den Vordergrund rückt. Diesen Effekt nennt man in der Branche "Lightbox"- Effekt.

Der Lightbox- Effekt wird in der Regel per Javascript erzeugt. Da aber bei den Allmy-Profilen und Blogs aus Sicherheitsgründen der Einsatz von Programiersprachen nicht erlaubt und daher gesperrt ist, habe ich in meinem Profil eine Fotoshow mit Lightbox-Effekt in reinem CSS geschrieben:

-> Die Vorschaubilder (Thumbnails)

lb1

-> Das Foto mit dem Lightbox- Effekt

lb2

Zum anschauen und testen geht's hier lang :Y:

Der Code
(1.758 Zeichen CSS, 3.135 Zeichen HTML)

<style>

* {
box-sizing: border-box;
}

.container {
max-width: 960px;
margin: 0 auto;
padding: 0 10px;
}

.row {
margin: 0 -10px;
padding: 15px 0;
}

.clear {
zoom: 1;
}

.col {
float: left;
padding: 0 10px;
text-align: center;
}

.col-3 {
width: 25%;
width: calc(100% / 12 * 3);
width: -webkit-calc(100% / 12 * 3);
width: -moz-calc(100% / 12 * 3);
}

.thumb {
max-width: 218px;
max-height: 218px;
border: 4px solid #b1b2c9;
background-color: #b1b2c9;
}

.thumb, .thumb:hover {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none;
cursor: zoom-in;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}

.lightbox {
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 0;
position: fixed;
z-index: 9999;
}

.lightbox img {
position: absolute;
top: 50%;
left: 50%;
width: 640px;
height: 480px;
margin-left: -320px;
margin-top: -240px;
opacity: 0;
}

.lightbox:target {
outline: none;
width: 100%;
height: 100%;
opacity: 1 !important;
}

.lightbox:target img {
border: solid 4px #fff;
opacity: 1;
webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}

.light-btn {
color: #fff;
background-color: #000;
border: solid 4px #b1b2c9;
padding: 5px 15px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 50%;
z-index: 99;
}

.light-btn:hover {
color: #000;
background-color: #b1b2c9;
}

.btn-prev {
left: 15%;
}

.btn-next {
right: 15%;
}

.btn-close {
position: absolute;
right: 2%;
top: 150px;
color: #fff;
background-color: #000;
border: solid 4px #b1b2c9;
padding: 10px 15px;
text-decoration: none;
}

.btn-close:hover {
color: #000;
background-color: #b1b2c9;
}

</style>




[url=#img1]
[objerror=http%3A%2F%2Fwww.allcrime.watch%2Fallmy_styles%2Fkr.jpg]Bild nicht mehr verfügbar[/objerror][/url]

[url=#img8]<[/url]
[url=#_]X[/url]
[IMG]/i/te1252c_kr.jpg[/IMG]
[url=#img2]>[/url]




[url=#img2]
[objerror=http%3A%2F%2Fwww.allcrime.watch%2Fallmy_styles%2Fkr2.jpg]Bild nicht mehr verfügbar[/objerror][/url]

[url=#img1]<[/url]
[url=#_]X[/url]
[IMG]/i/t311d4e_kr2.jpg[/IMG]
[url=#img3]>[/url]




[url=#img3]
[objerror=http%3A%2F%2Fwww.allcrime.watch%2Fallmy_styles%2Fkm.jpg]Bild nicht mehr verfügbar[/objerror][/url]

[url=#img2]<[/url]
[url=#_]X[/url]
[IMG]/i/t5e49aa_km.jpg[/IMG]
[url=#img4]>[/url]




[url=#img4]
[IMG]/i/t264cff3a7_0e77a0_tatort.jpg[/IMG][/url]

[url=#img3]<[/url]
[url=#_]X[/url]
[IMG]/i/tdd30f2025_0e77a0_tatort.jpg[/IMG]
[url=#img5]>[/url]




[url=#img5]
[objerror=https%3A%2F%2Fwww.allmystery.de%2Fstatic%2Fupics%2F0e77a0_tatort.jpg]Bild nicht mehr verfügbar[/objerror][/url]

[url=#img4]<[/url]
[url=#_]X[/url]
[IMG]/i/t7a82d2_hg.jpg[/IMG]
[url=#img6]>[/url]




[url=#img6]
[objerror=http%3A%2F%2Fwww.allcrime.watch%2Fallmy_styles%2Fhg.jpg]Bild nicht mehr verfügbar[/objerror][/url]

[url=#img5]<[/url]
[url=#_]X[/url]
[IMG]/i/t48715d_hg2.jpg[/IMG]
[url=#img7]>[/url]




[url=#img7]
[objerror=http%3A%2F%2Fwww.allcrime.watch%2Fallmy_styles%2Fhg2.jpg]Bild nicht mehr verfügbar[/objerror][/url]

[url=#img6]<[/url]
[url=#_]X[/url]
[IMG]/i/t27d606_uv.jpg[/IMG]
[url=#img8]>[/url]




[url=#img8]
[objerror=http%3A%2F%2Fwww.allcrime.watch%2Fallmy_styles%2Fuv.jpg]Bild nicht mehr verfügbar[/objerror][/url]

[url=#img7]<[/url]
[url=#_]X[/url]
[IMG]/i/t45df0e_uv2.jpg[/IMG]
[url=#img1]>[/url]





Natürlich lässt sich die Größe und Anzahl der Bilder beliebig ändern und der Style der Lightbox dem eigenen Profil anpassen. Das ist kein Problem. Wer nicht zurecht kommt, einfach hier im Thread oder in der Diskussion: Do it yourself: CSS für Profil und Blog melden. :Y:

Liebe Grüße

t4dab98a4a b10b15 S C 2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

18.07.2016 um 19:59
Cube | Profile / Blog

Eine etwas andere Idee, eine Begrüßung oder Bilder ins Profil oder Blog einzubauen, ist der "Cube".

In dieser Version ist der Würfel um 45° in der Längsachse gedreht. Jede Seite hat eine andere Hintergrundfarbe und bleibt kurz stehen, um den Text lesen oder das Bild betrachten zu können.

Auch hier sind wieder alle Parameter frei einstellbar und können so den eigenen Wünschen oder Ideen angepasst werden.
Beispiele hierzu findet ihr auf meinem Profil und Blog.

cube

Der Code
(3.595 Zeichen CSS, 278 Zeichen HTML)

<style>

.cube_cnt {
width: 150px;
height: 150px;
margin: 80px auto 80px auto;
position: relative;
display: block;
transform: rotate(45deg);
}

.cube_cnt p {
transform: rotate(-45deg);
}

.cube {
-webkit-animation-name: cube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
animation-name: cube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 75px 75px 0;
-moz-transform-origin: 75px 75px 0;
-ms-transform-origin: 75px 75px 0;
transform-origin: 75px 75px 0;
}

.cube div {
position: absolute;
width: 150px;
height: 150px;
line-height: 110px;
text-align: center;
font-size: 14px;
color: #000;
}

.cube .f1 {
-webkit-transform: translateZ(75px);
-moz-transform: translateZ(75px);
-ms-transform: translateZ(75px);
transform: translateZ(75px);
background: red;
}

.cube .f2 {
-webkit-transform: rotateY(90deg) translateZ(75px);
-moz-transform: rotateY(90deg) translateZ(75px);
-ms-transform: rotateY(90deg) translateZ(75px);
transform: rotateY(90deg) translateZ(75px);
background: blue;
}

.cube .f3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
background: yellow;
}

.cube .f4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
background: green;
}

.cube .f5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
background: orange;
}

.cube .f6 {
-webkit-transform: rotateX(-90deg) translateZ(75px);
-moz-transform: rotateX(-90deg) translateZ(75px);
-ms-transform: rotateX(-90deg) translateZ(75px);
transform: rotateX(-90deg) translateZ(75px);
background: brown;
}

@-webkit-keyframes cube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(-270deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}

@keyframes cube {
from,to {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

16% {
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}

33% {
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}

50% {
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}

66% {
-moz-transform: rotateY(-270deg) rotateX(90deg);
-ms-transform: rotateY(-270deg) rotateX(90deg);
transform: rotateY(-270deg) rotateX(90deg);
}

83% {
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}

</style>



HERZLICH
WILLKOMMEN
AUF
MEINEM
ALLMY
BLOG/Profil



Wenn' s klemmt, einfach melden :Y:

So long...

t4dab98a4a b10b15 S C 2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

21.07.2016 um 02:34
Bilder-Slider mit Text | Profil & Blog

Eine Möglichkeit von vielen, Bilder mit Text darzustellen, ist der Bilder-Slider mit Text aus meinem alten Profil. Eine etwas andere Variante mit großen Bildern statt Text läuft auf meinem Profil.

Bilderslider Text

Üblicherweise mit Javascript befeuert, läuft diese Allmy- Version mit reinem CSS und bringt im Basic die Funktionen mit, die ein Slider beinhalten sollte. So wird z.B. das gehoverte oder angeklickte Bild optisch hervorgehoben und der entsprechende Text dazu angezeigt.
Erweiterungen oder Umbauten sind natürlich auch möglich, aber für CSS- Fremdlinge doch recht kompliziert. Wenn, dann am besten melden :Y:

Der Code
(1.657 Zeichen CSS, 2.129 Zeichen HTML)

<style>

#gal {
width: 400px;
height: 280px;
overflow: hidden;
border: 1px solid #404040;
background: #2B2B2B;
padding: 10px;
position: relative;
margin: 40px auto;
text-align: left;
font-family: "Courier New", Courier, monospace;
color: #fff;
}

#gal #ausgabe {
width: 6400px;
float: left;
position: relative;
left: 0;
-moz-transition: 2s;
-o-transition: 2s;
-webkit-transition: 2s;
}

#gal a {
position: relative;
float: left;
}

#gal img {
width: 640px;
}

#gal a img {
width: 79px;
margin: 0 1px 1px 0;
opacity: 0.4;
}

#gal a img:focus, #gal a img:hover {
opacity: 1;
}

#gal a + a + a + a + a img {
margin-right: 0;
width: 80px;
height: 59px;
}

#gal a:hover:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 1px;
bottom: 1px;
background: transparent;
}

#gal a:focus ~ #ausgabe , #gal a:hover ~ #ausgabe {
left: 0;
}

#gal a + a:focus ~ #ausgabe , #gal a + a:hover ~ #ausgabe {
left: -640px;
}

#gal a + a + a:focus ~ #ausgabe , #gal a + a + a:hover ~ #ausgabe {
position: relative;
left: -1280px;
}

#gal a + a + a + a:focus ~ #ausgabe , #gal a + a + a + a:hover ~ #ausgabe {
position: relative;
left: -1920px;
}

#gal a + a + a + a + a:focus ~ #ausgabe , #gal a + a + a + a + a:hover ~ #ausgabe {
position: relative;
left: -2560px;
}

.gal_title {
width: 100%;
float: left;
margin: 0px 0px 10px;
}

.gal_title span {
font-size: 11px;
}

.bildbox {
float: left;
}

h1.bildbox-top {
width: 640px;
font-size: 13px;
text-align: left;
background: transparent;
}

p.bildbox-text {
width: 390px;
height: 140px;
margin: 0;
padding: 0;
font-size: 13px;
text-align: left;
overflow-x: hidden;
}

h1.bildbox-top, p.bildbox-text {
line-height: 16px;
}

</style>



[b]German Evils[/b]

<span>(Klicke oder hover die Bilder)

[url=#a1][IMG]/i/t27b831_Rieken.png[/IMG] [/url]
[url=#a2][IMG]/i/tb0fbee_Rung.png[/IMG] [/url]
[url=#a3][IMG]/i/t326288_Gust.png[/IMG] [/url]
[url=#a4][IMG]/i/tf127d4_Ney.png[/IMG] [/url]
[url=#a5][IMG]/i/t2d3241_Joerg_Peter_P_.jpg[/IMG] [/url]




[b]Ronny (Rieken) Schulte[/b]

*12.02.1968, Oldenburg[/size]

[b]Mehrfachm&ouml;rder und Sexualstraft&auml;ter[/b]


2 Morde

14+ sexueller Kindesmissbrauch/ Vergewaltigungen

Lebenslange Haft, besondere Schwere der Schuld



[b]Thomas Rung[/b]

*03.01.1961, West-Berlin[/size]

[b]Serienm&ouml;rder und Sexualstraft&auml;ter[/b]


7 Morde

1 Versuchter Totschlag

6 Vergewaltigungen

Lebenslange Haft, 2x Sicherungsverwahrung



[b]Frank Gust, der "Rhein-Ruhr-Ripper"[/b]

*24.05.1969, Oberhausen[/size]

[b]Sadistischer, nekrophiler Serienm&ouml;rder[/b]


4+ Morde

Lebenslange Haft, nach eigener Aussage nicht therapierbar



[b]Martin Ney, der "Maskenmann"[/b]

*12.12.1970, Bremen[/size]

[b]Serienm&ouml;rder und Sexualstraft&auml;ter[/b]


3+ Morde

40+ sexueller Kindesmissbrauch

Lebenslange Haft, besondere Schwere der Schuld



[b]J&ouml;rg Peter P.[/b]

*1962, NRW[/size]

[b]Serienvergewaltiger, sexueller Missbrauch[/b]


1000+, f&uuml;r die meisten Taten jedoch nicht mehr zu belangen

Zehn Jahre Haft, geschlossene Psychiatrie






Bis denne...

t4dab98a4a b10b15 S C 2


melden
du_selbst
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

21.07.2016 um 09:42
Coole Sache, sowas hatte ich auch mal ins Auge gefasst, natürlich nicht die sadistischen, nekrophilen Serienmorde, sondern den Slider. @S_C


melden

Code- und Designerecke für Allmy Profile und Blogs

28.07.2016 um 14:01
@S_C

Auch auf diesem Wege nochmal lieben Dank für Deine Arbeit und die Codes die du uns hier zur Verfügung stellst! :)
Ich bin vor allem vom Cube begeistert. Habe es in mein Profil eingebaut und dem Profil angepasst.
Es hat auf Anhieb alles geklappt, was ja bei mir als Laien eher nicht so selbstverständlich ist.
Aber es macht einfach Spaß was auszuprobieren und zu experimentieren. :Y:

Wenn ich mal wieder mehr Zeit habe, dann versuche ich mich an was anderem.
Liebe Grüße :)


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

28.07.2016 um 22:41
@-Anna-
Kein Problem, denn es macht auch Spaß auszuloten, was bei Allmy im Bereich Blog und Profil Styling so geht :Y:

Habe den Cube auf deinem Profil gesehen. Hast du prima gefrickelt :Y:

Falls du die Drehgeschwindigkeit ändern möchtest, dann suche die Zeiteinstellung im dritten CSS- Block:

.cube {
-webkit-animation-name: cube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
animation-name: cube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 75px 75px 0;
-moz-transform-origin: 75px 75px 0;
-ms-transform-origin: 75px 75px 0;
transform-origin: 75px 75px 0;
}

Ändere dazu einfach die beiden 12s(ekunden)- Angaben. Je kleiner die Zahl, desto schneller dreht der Cube oder eben umgekehrt ;)

Viel Spaß damit und DANKE, dass du den Code einsetzt :Y:

Liebe Grüße

t4dab98a4a b10b15 S C 2


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

31.07.2016 um 23:11
Butterfly | Blog & Profil

Für die SchmetterlingsliebhaberInnen - einige von euch kenne ich ja ;) - habe ich einen per CSS animierten Schmetterling speziell für euer Allmy Profil oder Blog gefrickelt.
Das besondere dabei ist, dass sich quasi jeder Schmetterling einbauen und sich so eurem Design anpassen lässt :Y:

- Butterfly GOLD:

butterfly




+++ Praktische Beispiele zum anschauen: Gold | Violett | Black/Red +++




Die Schmetterlinge:
B= 178px
H= 208px
Dateiformat: .png, Hintergrund transparent

- GOLD

gold

- VIOLETT

violett

- BLACK/RED

black red

Wie ihr sehen könnt, handelt es dabei jeweils um die LINKE Hälfte eines Schmetterlings. Entsprechende Vorlagen bzw. Fotos zum bearbeiten findet ihr ohne Ende im Internet. Zu beachten wären nur die o.a. Parameter, da sonst Eingriffe in den Animationen und im Basis- Code notwendig wären.


Der Code
(8.251 Zeichen CSS, 105 Zeichen HTML)

#bf_cnt {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;

-webkit-perspective: 600px;
-webkit-perspective-origin: 0% 0%;

-moz-perspective: 600px;
-moz-perspective-origin: 0% 0%;

-ms-perspective: 600px;
-ms-perspective-origin: 0% 0%;

perspective: 600px;
perspective-origin: 0% 0%;
}

#butterfly {
left: 10%;
top: 0px;
width: 366px;
height: 208px;
position: absolute;

-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
-webkit-transform-origin: 80% 50%;

-moz-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
-moz-transform-origin: 80% 50%;

-ms-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
-ms-transform-origin: 80% 50%;

transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
transform-origin: 80% 50%;

-webkit-transform-style: preserve-3d;
-webkit-animation-name: butterfly;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

-moz-transform-style: preserve-3d;
-moz-animation-name: butterfly;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

-ms-transform-style: preserve-3d;
-ms-animation-name: butterfly;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

transform-style: preserve-3d;
animation-name: butterfly;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes butterfly {
from {
-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
25% {
-webkit-transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
50% {
-webkit-transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
75% {
-webkit-transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
to{
-webkit-transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
}

@-moz-keyframes butterfly {
from {
-moz-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
25% {
-moz-transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
50% {
-moz-transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
75% {
-mozmoz-transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
to{
-moz-transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
}

@-ms-keyframes butterfly {
from {
-ms-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
25% {
-ms-transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
50% {
-ms-transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
75% {
-ms-transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
to{
-ms-transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
}

@-keyframes butterfly {
from {
transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
25% {
transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
50% {
transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
75% {
transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
to{
transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
}
}

#r-wing {
position: absolute;
left: 178px;
top: 0px;
width: 178px;
height: 208px;
background-image: url('http://www.allcrime.watch//allmy_styles/butterfly/gold.png');
background-repeat: no-repeat;

-webkit-transform: rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
-webkit-transform-origin: top right;

-moz-transform: rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
-moz-transform-origin: top right;

-ms-transform: rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
-ms-transform-origin: top right;

transform: rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
transform-origin: top right;

-webkit-animation-name: r-wing;
-webkit-animation-duration: 0.2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

-moz-animation-name: r-wing;
-moz-animation-duration: 0.2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

-ms-animation-name: r-wing;
-ms-animation-duration: 0.2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

animation-name: r-wing;
animation-duration: 0.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes r-wing {
from {
-webkit-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
}
50% {
-webkit-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
}
to{
-webkit-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
}
}

@-moz-keyframes r-wing {
from {
-moz-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
}
50% {
-moz-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
}
to{
-moz-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
}
}
@-ms-keyframes r-wing {
from {
-ms-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
}
50% {
-ms-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
}
to{
-ms-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
}
}
@-keyframes r-wing {
from {
transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
}
50% {
transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
}
to{
transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
}
}

#l-wing {
left:0px;
top:0px;
width: 178px;
height: 208px;
background-image: url('http://www.allcrime.watch//allmy_styles/butterfly/gold.png');
background-repeat: no-repeat;

-webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
position: absolute;
-webkit-transform-origin: top right;

-moz-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
position: absolute;
-moz-transform-origin: top right;

-ms-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
position: absolute;
-ms-transform-origin: top right;

transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
position: absolute;
transform-origin: top right;

-webkit-animation-name: l-wing;
-webkit-animation-duration: 0.2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

-moz-animation-name: l-wing;
-moz-animation-duration: 0.2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

-ms-animation-name: l-wing;
-ms-animation-duration: 0.2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

animation-name: l-wing;
animation-duration: 0.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes l-wing {
from {
-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
50% {
-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 80deg);
}
to{
-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
}

@-moz-keyframes l-wing {
from {
-moz-transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
50% {
-moz-transform:rotateX(90deg) rotate3d(0, 1, 0, 80deg);
}
to{
-moz-transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
}

@-ms-keyframes l-wing {
from {
-ms-transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
50% {
-ms-transform:rotateX(90deg) rotate3d(0, 1, 0, 80deg);
}
to{
-ms-transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
}

@-keyframes l-wing {
from {
transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
50% {
transform:rotateX(90deg) rotate3d(0, 1, 0, 80deg);
}
to{
transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
}

</style>








Bei Fragen usw. einfach melden :Y:

So long...

t4dab98a4a b10b15 S C 2


melden
nodoc
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

12.09.2016 um 12:14
@S_C

Schade das du nicht mehr hier bist!

co89

Danke für deine Insirationen und das du mich mit deinen tollen Ideen infiziert hast.
Alles Gute für dich!


melden
tic
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

19.09.2016 um 18:56
bye @S_C :|


melden

Code- und Designerecke für Allmy Profile und Blogs

21.06.2017 um 19:43
Hallo,

ich hätte da ein kleines Problem:

In meinem Profil steht im Code bei Profilinfo:

.profile_info,#gb_posts .gb_post_text_np, a#more_entries_link, h2 {
display: none;
}

Unter den Gästebucheinträgen fehlt jetzt aber der Link um die ausgeblendeten Einträge anzeigen zu lassen. Was fehlt?


melden

Code- und Designerecke für Allmy Profile und Blogs

21.06.2017 um 20:30
hat sich erledigt^^


melden
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

24.06.2017 um 21:46
YouTube Video in Profilen mit Autostart-Funktion

Um in den Profilen YT-Vids automatisch abspielen lassen zu können, musst du den Allmy-Code ein bisschen aufbohren:

<*iframe width="560" height="349" src="https://www.youtube.com/embed/8RzEYlbJftw?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

YouTube Video-ID (Buchstaben/Zahlen-Code NACH dem "v="
Autoplay-Erweiterung

Gibst du dem iframe eine Klasse oder ID, kannst du den per CSS explizit ansprechen und stylen.

Beim Einsatz des YT-Tags * entfernen nicht vergessen ;)


So long...

t1cdf079eb t4dab98a4a b10b15 S C 2


melden
Anzeige
S_C
Diskussionsleiter
ehemaliges Mitglied

Lesezeichen setzen

Code- und Designerecke für Allmy Profile und Blogs

09.07.2017 um 00:01
TV im Profil und Blog

Mit dem Code "TV im Profil und Blog" kannst du beliebig viele YouTube Videos auf deinem Profil oder Blog anzeigen lassen. Dazu wird ein "TV" (iframe) angelegt, in dem deine Vids abgespielt werden. Natürlich lässt sich der TV individuell gestalten.

Im Profil wird das erste Video standardmäßig autmatisch gestartet und wenn du auf deinem YT-Kanal eine Playlist angelegt hast, lässt die sich ebenfalls problemlos einbauen.

Beispiele findest du im Blog von S_C und auf dem Profil von S_C .

Der Basis Code
(313 Zeichen CSS, 1.044 Zeichen HTML)

<style>

#wrapper {
width: 660px;
height: 420px;
text-align: center;
display: block;
margin: 10px auto;
position: relative;
}

iframe#ytvid {
width: 100%;
max-width: 640px;
height: 100%;
max-height: 480px;
background: #000;
border: solid 10px #404040;
}

.v_link {
display: block;
margin: 5px 0 5px 0;
}

</style>

<!-- rahmen -->
<div id="wrapper">

<!-- video frame -->
[youtube]8RzEYlbJftw[/youtube]

<!-- video link 1 -->
<a class="v_link" rel="nofollow" href="https://youtube.com/embed/Ae829mFAGGE?rel=0&loop=1&autoplay=1&controls=1&showinfo=1&autohide=1&playsinline=1&iv_load_policy=3&wmode=transparent" target="ytvid">ZZ Top: Gimme All Your Lovin'</a>

<!-- video link 2 -->
<a class="v_link" rel="nofollow" href="https://youtube.com/embed/0RyInjfgNc4?rel=0&loop=1&autoplay=1&controls=1&showinfo=1&autohide=1&playsinline=1&iv_load_policy=3&wmode=transparent" target="ytvid">Rihanna: Love On The Brain</a>

<!-- video link 3 -->
<a class="v_link" rel="nofollow" href="https://youtube.com/embed/K2XY6oRD2xc?rel=0&loop=1&autoplay=1&controls=1&showinfo=1&autohide=1&playsinline=1&iv_load_policy=3&wmode=transparent" target="ytvid">James Brown: Try Me</a>

</div>


So long...

t2bd9ebc t1cdf079eb t4dab98a4a b10b15 S


melden
102 Mitglieder anwesend
Konto erstellen
Allmystery Newsletter
Alle zwei Wochen
die beliebtesten
Diskussionen per E-Mail.

Themenverwandt
Anzeigen ausblenden