簡單究好 Simple is Best

網頁前端開發資訊

如何使用 Open Graph, Twitter Card 自訂網頁在 Facebook, Google, Twitter… 的顯示內容

使用 Open Graph, Twitter Card 自訂網頁在 Facebook, Google, Twitter… 的顯示內容

 

當有人在Facebook, Google+, Twitter這些社群網站平台分享您網站的內容時,這些社群網站會自動從我們的網站中抓取分享的資訊。但這些自動抓取的資訊不見得符合網站的內容,因為社群網站只能猜測哪些內容重要、哪些不重要。若是可以由我們自己決定分享的資訊,是不是可以更符合網站的內容呢?如果希望可以控制分享的資訊該怎麼做呢?這篇文章就是要教你如何利用社群分享的中繼標籤(social meta tags)來自訂分享內容的標題、圖片和說明文字。
Read More

如何單純使用CSS3及HTML製作圖片輪播效果

你知道嗎?有了CSS3,就算不用javascript,我們也可以製作出圖片輪播效果。今天這篇文章就要示範如何單純使用CSS3及HTML製作圖片輪播效果

pure css slider
pure css slider
pure css slider
pure css slider
pure css slider

要製作純 CSS的輪播效果、就要先充份了解 CSS3 的 transitions 和 animation Read More

如何使用HTML5 <picture>實現響應式圖片

<picture>是一個新的HTML5標籤、我們可以使用它來設定在不同條件下(螢幕寬度、高度、方向、像素密度)載入不同的圖片。

當我們在設計響應式網頁時、對於圖片的處理方式通常會使用較高解析的圖片、再利用CSS將圖片縮小以符合小螢幕的畫面。以下的CSS可以將圖片限制在範圍裡、並且能夠維持圖片的長寬比例。

img {
    max-width: 100%;
    height: auto;
    }

Read More

Google Code Prettify – 程式碼上色工具

Google Code Prettify 是一套幫程式語法上色的工具、用法非常簡單、只要引用他的CSS和javascript之後、再把要上色的程式碼用<pre  class=”prettyprint”>的標籤包起來,最後別忘了在body的標籤內加上 onload=”prettyPrint()”就可以了

Step1
下載並解壓縮Google Code Prettify
下載位置
Read More

頁次:12