Rotate dengan CSS3
Kemampuan baru pada CSS3 adalah rotate. Bisa digunakan untuk rotate tulisan maupun gambar. Biasanya untuk melakukan rotasi harus menggunakan script. Kini hal itu dipermudah dengan CSS3.
CSS3 saat ini baru diimplementasikan pada web browser major terbaru. Seperti Mozilla Firefox 3.5, Safari 4.0 dan Google Chrome 3.0beta.
Seorang rekan di CHIP Forum bertanya tentang pembuatan tombol miring dengan wujud foto. Berikut mockup dari aplikasi web yang ingin dibuatnya:
Original file here.
Untuk membuat tombol tersebut dengan CSS3 bisa menggunakan –moz-transform atau –webkit-transform atau –moz-transform-origin atau –webkit-transform-origin.
Pada contoh disini, saya menggunakan –moz-transform dan –webkit-transform.
img {
position: absolute;
border: 0;
-moz-box-shadow: black 0 0 7px 1px;
-webkit-box-shadow: black 0 0 7px 1px;
}
#home {
top: 50px;
left: 100px;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index: 10;
}
#portfolio {
top: 150px;
left: 80px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
z-index: 9;
}
#product {
top: 270px;
left: 100px;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
filter: matrix(10 10 10 10);
z-index: 8;
}
#about {
top: 410px;
left: 90px;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
z-index: 9;
}
#contact {
top: 520px;
left: 90px;
-moz-transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
z-index: 8;
}
Dengan HTML:
<img id="home" src="home.gif" />
<img id="portfolio" src="home.gif" />
<img id="product" src="home.gif" />
<img id="about" src="home.gif" />
<img id="contact" src="home.gif" />
Untuk menjaga agar ukuran file tetap kecil, saya hanya menggunakan satu gambar, yaitu home.gif.
Note: Untuk dapat melihat hasil demo ini, anda harus menggunakan web browser yang disebutkan diatas.
Mengenal CSS3 Selector
Saat ini CSS3 hanya dapat digunakan pada web browser terbaru. Seperti Safari 4.0, Opera 10 dan Firefox 3.5, Google Chrome 3.0. Sayangnya Internet Explorer 8 belum mengimplementasikan CSS3 ini.
Untuk contoh CSS dibawah, kita menggunakan HTML:
<ul> <li>Ganjil - 1</li> <li>Genap - 2</li> <li>Ganjil - 3</li> <li>Genap - 4</li> <li>Ganjil - 5</li> </ul>
Elemen Ganjil dan Genap
li:nth-child(odd) { color: blue; } li:nth-child(even) { color: green; }
Code diatas digunakan untuk memilih tag li yang ganjil dan genap.
Setiap Elemen Ketiga
li:nth-child(3n) { color: orange; }
Code diatas digunakan untuk membuat warna pada baris ketiga dan kelipatannya.
Elemen Tertentu
li:nth-of-type(3) { color: orange; } li:nth-child(5) { color: red; }
Selector hanya memilih baris ketiga dan kelima.
Elemen Pertama dan Terakhir
Elemen Pertama
li:first-of-type { color: blue; margin-left: 15px; }
Elemen Terakhir
li:last-of-type { color: green; margin-left: 15px; }
Dua Elemen Pertama
li:nth-child(-n+2) { color: green; margin-left: 15px; }
Dua Terakhir
li:nth-last-child(-n+2) { color: green; margin-left: 15px; }
CSS3 membuat tugas anda menjadi lebih mudah. Sayangnya belum semua web browser mengimplementasikannya saat ini. Harapannya semoga semua pengguna web browser meng-update web browser mereka. Agar apa yang ingin ditampilkan oleh web developer sesuai dengan yang dilihat end-user.
References: http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
Membuat RSS Feeds
Tambahkan pada <head>
<head> <link rel="alternate" type="application/rss+xml" href="http://url-php-anda/rss.php" /> </head>
Struktur XML
</channel>
<?xml version="1.0" ?> <rss version="2.0"> <channel> <title>Judul Pertama</title> <link>http://www.url-anda.com/page/1</link> <description>Hallo ini ada lah judul pertama hehehe..</description> </channel> <channel> <title>Judul kedua</title> <link>http://www.url-anda.com/page/2</link> <description>Kalo yang ini yang kedua</description> </channel> </rss>
Kalau ada gambar, tambahkan didalam <channel>
<image> <url>http://www.url-anda.com/hola.gif</url> <link>http://www.url-anda.com/page/1</link> </image>
Ini tutorial bikin blog simple pake Kohana
Diambil dari kohana-id@googlegroups.com
Blog nya ini simple banget.. cuma CR… bukan CRUD…
Semoga bisa sedikit membantu buat yang baru belajar Kohana..
Isi file application/controllers/welcome.php
<?php
class Welcome_Controller extends Template_Controller {
public $template = 'template'; // View yang terdapat pada 'views/template.php'
public function __construct() {
parent::__construct();
$this->template->menus = array('Home'=>'welcome',
'Article'=>'welcome/article',
'Post'=>'welcome/post');
}
public function index() {
$this->template->content = 'Ini Home';
}
public function article () {
$this->template->content = new View ('article');
$db = ORM::factory('article'); $data = $db->orderby('sent','DESC')->find_all();
$this->template->content->isi = $data;
}
public function post () {
$this->template->content = new View ('post');
}
public function save () {
$db = ORM::factory('article');
$db->subject = $_POST['subject'];
$db->message = $_POST['message'];
$db->sent = date('Y-m-d H:i:s');
$db->save();
url::redirect('welcome/article');
}
}
Isi file application/views/template.php
<html>
<head>
<title>Simple Blog with Kohana</title>
<style>
body {
background: black;
color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
}
a, a:visited {
color: orange;
text-decoration: none;
}
a:hover {
color: gold;
}
#wrapper {
width: 760px;
margin: auto;
}
input, textarea {
display: block;
}
.sent {
color: #333;
}
#menu li {
margin-right: 10px;
display: inline;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear {
clear: both;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Simple Blog with Kohana</h1></div>
<ul id="menu">
<?php foreach ( $menus as $menu => $url ): ?>
<li><?php echo html::anchor($url, $menu) ?></li>
<?php endforeach ?>
</ul>
<div id="content"><?php echo $content ?></div>
<div id="footer">Copyright© 2009 mul14</div>
</div>
</body>
</html>
Isi file application/views/article.php
<?php foreach ($isi as $v): ?> <h2><?php echo $v->subject ?></h2> <div>Sent: <?php echo $v->sent ?></div> <div><?php echo $v->message ?></div> <?php endforeach ?>
Isi file application/views/post.php
<?php
echo form::open('welcome/save');
echo form::label('subject', 'Subject') . form::input('subject');
echo form::label('message', 'Message') . form::textarea('message');
echo form::submit('send', 'Send');
echo form::close();
?>
Isi file application/models/article.php
<?php
class Article_Model extends ORM {}
MySQL nya:
CREATE TABLE IF NOT EXISTS `articles` ( `id` int(11) NOT NULL AUTO_INCREMENT, `subject` tinytext CHARACTER SET utf8 NOT NULL, `message` text CHARACTER SET utf8 NOT NULL, `sent` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ; INSERT INTO `articles` (`id`, `subject`, `message`, `sent`) VALUES (1, 'Vestibulum hendrerit', '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nisi. Praesent pharetra augue quis magna. Nulla eros. Donec quis urna in lorem nonummy iaculis. Suspendisse tempor venenatis mauris. Cras pulvinar purus id leo posuere imperdiet. Duis aliquam elementum ipsum. Proin non leo. Aliquam erat volutpat. Etiam ultricies pede eget nulla.</p>\r\n', '2009-06-28 03:15:16');
Jangan lupa sesuaikan isi application/config/config.php
Firefox 3.5
Firefox 3.5 kini telah mencapai versi RC2 (Release Candidate 2). Menurut informasi berbagai sumber, versi final dari Firefox ini dirilis pada 10 Juni.
Apa sih yang baru?
- Gecko 1.9.1
- Private Browsing
- Perbaikan performa dan stabilitas TraceMonkey
- Location Aware Browsing
- Native JSON
- Mengenal tag baru <video> dan <audio>
Untuk para web developer klik disini untuk melihat fitur baru Firefox 3.5.
Download Firefox di www.getfirefox.com
