Συντονιστής: konnn
από linuxs » 22 Φεβ 2012, 10:05
... Απλά θέλω να μην γίνεται αυτό με το hover του ποντικιού αλλα γενικά μόλις μπαίνω στην σελίδα. Να αρχίσει να γυρνάει γύρω γύρω για πάντα μέχρι να κάνω reload. Γίνεται? Αν ναι πως? 
.
από simosx » 25 Φεβ 2012, 16:05
linuxs έγραψε:
δείτε εδώ: http://cs.uoi.gr/~billys/ και βάλτε το ποντίκι πάνω αριστερά στο Logo. Επι 10 λεπτά αυτό έκανα το πρωί
από linuxs » 25 Φεβ 2012, 16:12
simosx έγραψε:linuxs έγραψε:
δείτε εδώ: http://cs.uoi.gr/~billys/ και βάλτε το ποντίκι πάνω αριστερά στο Logo. Επι 10 λεπτά αυτό έκανα το πρωί
Ωραίο. Πρέπει να εξηγήσεις τι έχεις κάνει με απλό τρόπο ώστε να είναι σε θέση κάποιος να κάνει μια πρόταση.
Δηλαδή, προσφέρεις κάτι στο φόρουμ ώστε να μπορέσει κάποιος να δώσει πίσω.
<html>
<head>
<title>Personal webpage of cs091770(billys)</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
</head>
<body>
<div id="main">
<div id="header">
<div id="header_background">
<div id="welcome">
<div id="picture">
<!-- Picture will be added from CSS -->
</div>
<div id="welcome_title">
<h3> Καλως ήρθατε στην ιστοσελίδα μου...</h3>
</div>
<div id="info">
<p> Vasileios Tzivaras
</br> University of Ioannina
</br> Computer Science Department
</br> 45110 Ioannina
</br> Greece
</br> Phone: +30 265 100 8802
</br> billys@cs(dot)uoi(dot)gr
</p>
</div> <!-- end of info -->
</div> <!-- end of welcome -->
<div id="menubar">
<li class="li_bar"> <a class="selected" href="index.html"> Home </a></li>
<li class="li_bar"> <a class="selected" href="studying.html"> Studying </a></li>
<li class="li_bar"> <a class="selected" href="support.html"> Support </a></li>
<li class="li_bar"> <a class="selected" href="ubuntu.html"> Ubuntu </a></li>
</div>
</div>
</div> <!-- end of header -->
<div id="content">
...βάλτε εδώ ότι θέλετε...
</div> <!-- end of content -->
<div id="footer">
<p>Copyright Billys Tzivaras 2011-2012 </p>
</div>
</div> <!-- end of main -->
</body>
</html>
/*********************************************************************
------------------------- MY CSS ---------------------------
by vasilis tzivaras
*********************************************************************/
/*************** MAIN CONTENT ***************/
body {
background: black;
/*color: #4B4B4B;*/
/*font-family: 'Comic Sans Ms';*/
}
#main {
/*background-image: url('../images/main_bg.jpg');*/
}
/*********************************************
main -> {header, content, footer}
*********************************************/
#header {
/*height: 150px;*/
background: white;
float: center;
}
#content {
font-family: 'Comic Sans MS';
text-align: left;
background: url('../images/content_bg.png');
width: 1100px;
color: white;
overflow: hidden;
margin: 40px auto 0 auto;
padding: 40px 24px 20px 37px;
border-style: ridge;
border-width: 3px;
border-color: #7A1E1E;
float: center;
box-shadow: 7px 7px 30px #7A1E1E;
}
#footer {
width: 100%;
height: 33px;
color: white;
font-family: 'Comic Sans MS';
font-size: 10px;
text-align: center;
text-transform: uppercase;
padding: 24px 0 0 0;*/
}
/*********************************************
header -> *header_background*{welcome, menubar}
*********************************************/
/* text-align: value each div manually*/
#welcome {
height:220px;
width: 1200px;
float: center;
font-family: 'Comic Sans MS';
color: white;
overflow: hidden;
margin: 5px auto 0px auto;
padding: 5px 5px 5px 5px;
/*background: white;*/
}
#header_background {
background-image: url('../images/header_bg.png');
}
#menubar {
height: 38px;
text-align: center;
background-image: url('../images/menubar.png');
/*margin-top: 15px;*/
/*margin-bottom: 15px;*/
}
/*********************************************
welcome -> {picture, welcome_title, info}
*********************************************/
#picture {
height: 180px;
width: 188px;
background-image: url('../images/logo_red.png');
margin: 4px 0px 4px 4;
float: left;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
/*background-color: grey;*/
}
#picture:hover {
height: 180px;
width: 188px;
transform: rotate(180deg);
-moz-transform: rotateY(180deg); /* Firefox 4 */
-webkit-transform: rotateY(180deg); /* Safari and Chrome */
-o-transform: rotateY(180deg); /* Opera */
}
#welcome_title {
height: 210px;
width: 642px;
margin: 4px 20px 4px 20px;
float: left;
/*background: green;*/
text-shadow: 8px 6px 8px #FF0000;
font-family: "Comic Sans Ms";
text-align: center;
font-size: 42px;
}
#info {
height: 210px;
width: 300px;
float: right;
margin: 4px 4px 4px 0px;
/*background: blue;*/
font-family: Consolas;
/*color: white; */
}
#facephoto {
background-image: url('../images/facephoto.png');
height: 180px;
width: 180px;
margin: 4px 0px 4px 4;
float: left;
}
#contact_info {
width: 800px;
float: left;
margin: 0px 0px 4px 40px;
}
/*********************************************
CSS classes
*********************************************/
.music_title {
color: white;
}
.selected {
color: #860808;
text-decoration: none;
word-spacing: 20px;
font-family: 'Comic Sans MS';
font-size: 26px;
}
.content_tag {
height: 300px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #860808;
margin-bottom: 30px;
/*background: green;*/
}
.post_image {
float: left;
*/background: red;*/
width: 160px;
height: 180px;
margin: 0 2 5 5;
}
.post_text {
/*background: blue;*/
float: left;
width: 850px;
height: 180px;
margin: 0px 2px 5px 50px;
}
.li_bar{
display: inline;
}
/*********************************************
Headers
*********************************************/
h2 {
font: normal 175% 'Comic Sans MS';
color: #B81D1D;
margin: 0 0 5px 0;
padding: 15px 0 6px 0;
}
#c_title {
text-align: center;
font-size: 42px;
}
/*********************************************
Other
*********************************************/
a {
font-size: 18px;
color: #992F2F;
text-decoration: none;
}
a:hover {
color: white;
/*background: #C25454; */
/*text-decoration: underline;*/
}
#picture {
height: 180px;
width: 188px;
background-image: url('../images/logo_red.png');
margin: 4px 0px 4px 4;
float: left;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
/*background-color: grey;*/
}#picture:hover {
height: 180px;
width: 188px;
transform: rotate(180deg);
-moz-transform: rotateY(180deg); /* Firefox 4 */
-webkit-transform: rotateY(180deg); /* Safari and Chrome */
-o-transform: rotateY(180deg); /* Opera */
}
από simosx » 25 Φεβ 2012, 16:29
linuxs έγραψε:
Αυτό που θέλω είναι απο την στιγμή που μπάινει κάποιος στην σελίδα να αρχίσει να γυρνά το logo. Ίσως πρέπει αν χρησιμοποιήσω javascript αλλα δεν είμαι σίγουρος.
από linuxs » 25 Φεβ 2012, 16:33
Θα σκεφτώ κάτι άλλο τότε! ευχαριστώ.από Αποστόλης » 25 Φεβ 2012, 20:35
από linuxs » 29 Φεβ 2012, 19:58
Αποστόλης έγραψε:Δοκίμασε να βγάλεις τελείως το hover.
Κοίτα κι εδώ http://www.the-art-of-web.com/css/3d-transforms/ μήπως πάρεις καμμιά καλή ιδέα.
Φοβερά κολπάκια και αρκετά όμορφα σε ευχαριστώ....