[NEW] world flags rendered by CSS | css thailand – POLLICELEE

css thailand: คุณกำลังดูกระทู้

 

Phoca CSS Flags is a CSS library which renders world flags with help of CSS file only. No images are used for rendering the flags.

Demo

ae

United Arab Emirates

ag

Antigua And Barbuda

am

Armenia

an

Netherlands Antilles

at

Austria

au

Australia

aw

Aruba

ax

Aaland

az

Azerbaijan

ba

Bosnia And Herzegovina

bb

Barbados

bd

Bangladesh

be

Belgium

bf

Burkina Faso

bg

Bulgaria

bh

Bahrain

bi

Burundi

bj

Benin

bo

Bolivia

bs

Bahamas

bv

Bouvet Island

bw

Botswana

by

Belarus

ca

Canada

catalonia

Catalonia

cd

Democratic Republic Of Congo

cf

Central African Republic

cg

Congo

ch

Switzerland

ci

Cote D’ivoire

cl

Chile

cm

Cameroon

cn

China

co

Colombia

cr

Costa Rica

cu

Cuba

cz

Czech Republic

de

Germany

dj

Djibouti

dk

Denmark

dz

Algeria

ee

Estonia

eh

Western Sahara

england

England

es

Spain

et

Ethiopia

eu

Europe

fi

Finland

fm

Federated States Of Micronesia

fo

Faroe Islands

fr

France

ga

Gabon

gb

United Kingdom

ge

Georgia

gf

French Guiana

gg

Guernsey

gh

Ghana

gl

Greenland

gm

Gambia

gn

Guinea

gp

Guadeloupe

gr

Greece

gt

Guatemala

gw

Guinea-bissau

gy

Guyana

hk

Hong Kong

hm

Heard Island And Mcdonald Slands

hn

Honduras

hu

Hungary

id

Indonesia

ie

Ireland

il

Israel

in

India

is

Iceland

it

Italy

jm

Jamaica

jo

Jordan

jp

Japan

ke

Kenya

km

Comoros

kn

Saint Kitts And Nevis

kp

North Korea

kr

South Korea

kw

Kuwait

la

Laos

lc

Saint Lucia

lr

Liberia

lt

Lithuania

lu

Luxembourg

lv

Latvia

ly

Libya

ma

Morocco

mc

Monaco

mf

Saint Martin

mg

Madagascar

mh

Marshall Islands

mk

Macedonia

ml

Mali

mn

Mongolia

mr

Mauritania

mu

Mauritius

mv

Maldives

my

Malaysia

na

Namibia

nc2

New Caledonia

nc

New Caledonia

ne

Niger

ng

Nigeria

nl

Netherlands

no

Norway

nr

Nauru

pa

Panama

pe

Peru

pk

Pakistan

pl

Poland

pr

Puerto Rico

pw

Palau

qa

Qatar

ro

Romania

rs

Serbia

ru

Russia

rw

Rwanda

sb

Solomon Islands

sc

Seychelles

scotland

Scotland

sd

Sudan

se

Sweden

sg

Singapore

sj

Svalbard And Jan Mayen

sl

Sierra Leone

sn

Senegal

so

Somalia

sr

Suriname

st

Sao Tome And Principe

sy

Syria

td

Chad

tg

Togo

th

Thailand

tm

East Timor

tn

Tunisia

to

Tonga

tr

Turkey

tt

Trinidad And Tobago

tw

Republic Of China Taiwan

tz

Tanzania

ua

Ukraine

um

United States Minor Outlying Islands

us

United States

ve

Venezuela

vn

Vietnam

wf

Wallis And Futuna

ws

Samoa

za

South Africa

 

Using

Using this method (rendering flags only by CSS) has pros and cons. It always depends on how or where such method will be used.

How does it work?

Displaying the flags is based on SVG feature. SVG is XML-based vector image format (see more information: Scalable Vector Graphics). CSS doesn’t include a link to the SVG file but it directly includes its source code and renders it as background image.

What are the pros?

  • No need to upload all flag images to the server
  • No additional HTTP requests made as when linking flag images
  • Images are vectors – they are scalable. It means that different sizes can be rendered without losing quality of the image. They are independent to their resolution. Design quality is independent to image size.
  • New flag can be easily added to CSS – just create or download the SVG of the flag, clean it (there are several programs to clean SVG) and encode its code with help of base64, then just add this code to your CSS file. Encoding is needed because of support some internet browsers.

What are the cons?

  • Some obsolete browsers don’t support SVG, see: SVG in CSS backgrounds
  • Some browsers don’t support including of raw SVG code in CSS, so it must be encoded by e.g. base64 method and the final CSS is then larger.
  • Some of the SVG flags are very large. So including all world flags (over 250 flags) in one CSS doesn’t make any sense because the final size of the CSS will be larger than 4 MB (Fortunately, there are different applications where you don’t need to include all the world flags. E.g. if you want to list different languages on your site. For English language, over 20 flags can be omitted. Similar to other languages – French, Spanish, …)

Pro or Con?

  • In some cases, the different rate (relation between width and height) can be a problem. SVG flags are real flags and the rate is different. Some flags have rate 2:1, some 3:2, etc. So flags don’t have the same size. The size can be set so that all flags will have the same width or that all will have the same height, but you cannot set that they will have the same width and height (because the rate of the images will be destroyed). On this site, you can see examples, where all the listed flags have the same width. So sometimes the real size (rate) can be a pro, sometime it can be a con. Depends on used design on a website.

When to use the CSS library?

For example, your site renders list of 50 language flags. Then you just need to load one CSS, where the language codes and their attributes are defined.

Of course, you always have to think about it. If it is reasonable to display flags this way. In case you are displaying one or two flags on your site, it doesn’t make any sense to load 4 MB CSS file which includes all world flags definitions. But, as written above, most of the large size flags don’t need to be included in some cases.

For example:

While making a list of languages you don’t need to include Saint-Pierre a Miquelon flag (it is a graphically complex flag and its size is too large) because French is spoken in this self-governing territorial. Including French flag in CSS is sufficient. There are a lot of large size flags which don’t need to be included.

This applies to national and civil flags too.

(157 023 b) vs.

To save the library size, some of the flags can be rendered as civil flags. Mostly there is a big size difference between national and civil flag. National flags include complex characters. Civil flags don’t include them. See example: Spanish national flag (157 023 b) vs. Spanish civil flag (168 b)

There are different SVG files for each flag. In case, you need to reduce the size of CSS file, you can include version of the flag with simplified code, so the final size of CSS will be smaller.

Examples

Example – CSS code of German flag

The following CSS code is responsible for rendering the German flag on the site:

/* germany */
.de {
 background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjYwMCIgdmlld0JveD0iMCAwIDUgMyI+DQo8cGF0aCBkPSJtMCwwaDV2M2gtNXoiLz4NCjxwYXRoIGZpbGw9IiNkMDAiIGQ9Im0wLDFoNXYyaC01eiIvPg0KPHBhdGggZmlsbD0iI2ZmY2UwMCIgZD0ibTAsMmg1djFoLTV6Ii8+DQo8L3N2Zz4NCg==');
 width: 100%;
 height: 60%;
 background-size: 100% 100%;
}

 

Flags with CSS3 gradient effect

Use standard browsers to see these effects.

 

Flags with different size

 

Australia

 

Even more

Of course, you can add your specific SVG icons and extend the class.

 

Download

Be aware, download package includes CSS file with over 250 world flags. Some of the flags definitions are very large. In fact, it is not possible to use whole CSS on the server because of loading issues. It has over 4 MB. You can see the flags on your PC but to use them on your website, you need to select flags. You need to remove flags you are not going to use from the CSS file.

 

CSS in download package includes following flags:

Andorra (ad), United Arab Emirates (ae), Afghanistan (af), Antigua And Barbuda (ag), Anguilla (ai), Albania (al), Armenia (am), Netherlands Antilles (an), Angola (ao), Argentina (ar), American Samoa (as), Austria (at), Australia (au), Aruba (aw), Aaland (ax), Azerbaijan (az), Bosnia And Herzegovina (ba), Basque (basque), Barbados (bb), Bangladesh (bd), Belgium (be), Burkina Faso (bf), Bulgaria (bg), Bahrain (bh), Burundi (bi), Benin (bj), Bermuda (bm), Brunei (bn), Bolivia (bo), Brazil (br), Bahamas (bs), Bhutan (bt), Bouvet Island (bv), Botswana (bw), Belarus (by), Belize (bz), Canada (ca), Catalonia (catalonia), Cocos Islands (cc), Democratic Republic Of Congo (cd), Central African Republic (cf), Congo (cg), Switzerland (ch), Cote D\’ivoire (ci), Cook Islands (ck), Chile (cl), Cameroon (cm), China (cn), Colombia (co), Costa Rica (cr), Serbia And Montenegro (cs), Cuba (cu), Cape Verde (cv), Christmas Island (cx), Cyprus (cy), Czech Republic (cz), Germany (de), Djibouti (dj), Denmark (dk), Dominica (dm), Dominican Republic (do), Algeria (dz), Ecuador (ec), Estonia (ee), Egypt (eg), Western Sahara (eh), England (england), Eritrea (er), Spain (es), Ethiopia (et), Europe (eu), Finland (fi), Fiji (fj), Falkland Islands (fk), Federated States Of Micronesia (fm), Faroe Islands (fo), France (fr), Gabon (ga), Galicia (galicia), United Kingdom (gb), Grenada (gd), Georgia (ge), French Guiana (gf), Guernsey (gg), Ghana (gh), Gibraltar (gi), Greenland (gl), Gambia (gm), Guinea (gn), Guadeloupe (gp), Equatorial Guinea (gq), Greece (gr), South Georgia And South Sandwich Islands (gs), Guatemala (gt), Guam (gu), Guinea-bissau (gw), Guyana (gy), Hong Kong (hk), Heard Island And Mcdonald Slands (hm), Honduras (hn), Croatia (hr), Haiti (ht), Hungary (hu), Indonesia (id), Ireland (ie), Israel (il), Isle Of Man (im), India (in), British Indian Ocean Territory (io), Iraq (iq), Iran (ir), Iceland (is), Italy (it), Jersey (je), Jamaica (jm), Jordan (jo), Japan (jp), Kenya (ke), Kyrgyzstan (kg), Cambodia (kh), Kiribati (ki), Comoros (km), Saint Kitts And Nevis (kn), North Korea (kp), South Korea (kr), Kuwait (kw), Cayman Islands (ky), Kazakhstan (kz), Laos (la), Lebanon (lb), Saint Lucia (lc), Liechtenstein (li), Sri Lanka (lk), Liberia (lr), Lesotho (ls), Lithuania (lt), Luxembourg (lu), Latvia (lv), Libya (ly), Morocco (ma), Monaco (mc), Moldova (md), Montenegro (me), Saint Martin (mf), Madagascar (mg), Marshall Islands (mh), Macedonia (mk), Mali (ml), Myanmar (mm), Mongolia (mn), Macau (mo), Northern Mariana Islands (mp), Martinique (mq), Mauritania (mr), Montserrat (ms), Malta (mt), Mauritius (mu), Maldives (mv), Malawi (mw), Mexico (mx), Malaysia (my), Mozambique (mz), Namibia (na), New Caledonia (nc), Niger (ne), Norfolk Island (nf), Nigeria (ng), Nicaragua (ni), Netherlands (nl), Norway (no), Nepal (np), Nauru (nr), Niue (nu), New Zealand (nz), Oman (om), Panama (pa), Peru (pe), French Polynesia (pf), Papua New Guinea (pg), Philippines (ph), Pakistan (pk), Poland (pl), Saint-pierre And Miquelon (pm), Pitcairn Islands (pn), Puerto Rico (pr), Palestine (ps), Portugal (pt), Palau (pw), Paraguay (py), Qatar (qa), Reunion (re), Romania (ro), Serbia (rs), Russia (ru), Rwanda (rw), Saudi Arabia (sa), Solomon Islands (sb), Seychelles (sc), Scotland (scotland), Sudan (sd), Sweden (se), Singapore (sg), Saint Helena (sh), Slovenia (si), Svalbard And Jan Mayen (sj), Slovakia (sk), Sierra Leone (sl), San Marino (sm), Senegal (sn), Somalia (so), Suriname (sr), Sao Tome And Principe (st), El Salvador (sv), Syria (sy), Swaziland (sz), Turks And Caicos Islands (tc), Chad (td), French Southern And Antarctic Lands (tf), Togo (tg), Thailand (th), Tajikistan (tj), Tokelau (tk), East Timor ™, Turkmenistan ™, Tunisia (tn), Tonga (to), Turkey (tr), Trinidad And Tobago (tt), Tuvalu (tv), Republic Of China Taiwan (tw), Tanzania (tz), Ukraine (ua), Uganda (ug), United States Minor Outlying Islands (um), United States (us), Uruguay (uy), Uzbekistan (uz), Vatican City (va), Saint Vincent And Grenadines (vc), Venezuela (ve), British Virgin Islands (vg), United States Virgin Islands (vi), Vietnam (vn), Vanuatu (vu), Wales (wales), Wallis And Futuna (wf), Samoa (ws), Yemen (ye), Mayotte (yt), South Africa (za), Zambia (zm), Zimbabwe (zw)

 

There are two different packages. One where the images have the same width and second where the images have the same height (see the reasons above – different rate of the flags).

Support

If you have any question, if you have any idea or improvement or you just found some bug, please go to Phoca Forum and make a post there. Thank you.

[Update] Các thuộc tính CSS định dạng thẻ a (liên kết) | css thailand – POLLICELEE

Trong bố cục của một website, thẻ a đóng vai trò rất quan trọng để tạo liên kết giữa các trang trong website cũng như hỗ trợ rất nhiều cho SEO. Ngoài ra các thuộc tính CSS trong thẻ cũng được sử dụng rất nhiều mà bạn thường thấy như màu sắc, gạch chân, hover và link. Bài hôm nay chúng ta sẽ cùng tìm hiểu các thuộc tính CSS này.

Các thuộc tính CSS định dạng thẻ a thông dụng:

Bao gồm một số thuộc tính và sự kiện sau:

1. Định dạng màu sắc cho thẻ a

Mặc định trong thẻ a khi chúng ta tạo một liên kết bất kỳ thì màu sắc sẽ là màu tím. Bạn có thể định dạng lại màu theo cú pháp selector và color như sau:

Ví dụ : Định dạng màu sắc thẻ a là màu đỏ

a {
    color:red;
}

2. Định dạng background cho liên kết

Để định dạng màu nền chúng ta có thuộc tính Background.

Ví dụ : Định dạng nền màu xanh, chữ màu đỏ cho thẻ a (liên kết)

a {
     background: blue;
     color: red;
}

 

3. Ẩn dấu gạch chân thẻ a (liên kết)

Khi bạn tạo một liên kết bất kỳ ngoài màu sắc mặc định là màu tím thì còn có dấu gạch chân dưới liên kết. Bạn có thể bỏ dấu này đi bằng cú pháp như sau:

a {
    text-decoration: none;
}

4. Các Style sự kiện trong thẻ a (link, visited, active, hover)

Bao gồm 4 style sự kiện chính khi chúng ta nhấp chuột vào hay di chuyển chuột lên liên kết.

  •  

    link

    : Màu sắc của thẻ a mà bạn chưa click chuột vào lần nào

  •  

    visited

    : Là trạng thái khi bạn click vào thẻ

  •  

    active

    : Là trạng thái khi bạn click vào và nhấn giữ chuột liên kết đó

  •  

    hover

    : Là trạng thái chuyển màu sắc khi bạn đưa chuột lên liên kết đó

Quy tắc sử dụng các style sự kiện :

a:link{}
 
a:visited{}

a:active{}

a:hover{}

Ví dụ : Style link : Định dạng màu đỏ cho liên kết khi chưa click vào

a:link {
    color: red;
}

Ví dụ : Style visited : Định dạng màu vàng cho liên kết khi đã click vào

a:visited {
    color: yellow;
}

Ví dụ : Style active : Định dạng màu xanh cho liên kết khi bạn nhấn giữ chuột

a:active {
    color: blue;
}

Ví dụ: Style hover : Định dạng màu đen cho liên kết khi đưa chuột vào

a:hover {
    color: black;
}

5. Ví dụ tổng hợp CSS cho thẻ a

Chúng ta cùng làm một ví dụ đơn giản sau để xem luồng sự kiện CSS của thẻ:

  •  Ban đầu (link) màu sắc màu xanh, không gạch chân
  •  Hover vào (hover) thì màu sắc màu vàng và có gạch chân
  •  Khi nhấn giữ chuột (active) thì màu sắc màu đen và không gạch chân
  •  Khi click xong (visited) thì màu sắc màu trắng và có gạch chân

Ví dụ :

 

Lời kết : Kết thúc bài hôm nay chúng ta đã tìm hiểu và nắm được các thuộc tính CSS định dạng thẻ a thông dụng cũng như cách dùng trong một website. Bài tới chúng ta sẽ tìm hiểu về các thuộc tính CSS định dạng văn bản.

Chúc bạn thành công!

 

Những bài bạn nên xem:

 

#Cùng chuyên mục : Serie hướng dẫn học HTML căn bản

 

 


Web Design Course HTML CSS Bangkok Thailand


Vlog 193

Date
4 Days in May 2019.

The main reason I am back in Thailand can now be revealed; I am doing a web design course.
This covers HTML \u0026 CSS. Not really done anything like this before so it’s a real big step out of my comfort zone.
html css webdesign webcoursesbangkok bangkok 72blackie
Hotel Link(s)
A generous discount can be yours when you book a room at these hotels using these link(s)
Petals Inn
https://www.agoda.com/partners/partnersearch.aspx?cid=1802290\u0026pcs=1\u0026hl=en\u0026hid=408786
Dynasty Inn
https://www.agoda.com/partners/partnersearch.aspx?cid=1802290\u0026pcs=1\u0026hl=en\u0026hid=3341882
Paradiso Boutique Suites
https://www.agoda.com/partners/partnersearch.aspx?cid=1802290\u0026pcs=1\u0026hl=en\u0026hid=149187
Orchard Inn
https://www.agoda.com/partners/partnersearch.aspx?pcs=1\u0026cid=1802290\u0026hid=408041
Aspira Sukhumvit
https://www.agoda.com/partners/partnersearch.aspx?cid=1802290\u0026pcs=1\u0026hl=en\u0026hid=1266822
A7 Hidden Hostel
https://www.agoda.com/partners/partnersearch.aspx?cid=1802290\u0026pcs=1\u0026hl=en\u0026hid=699568

Anantara Sathorn Bangkok Hotel
https://www.agoda.com/partners/partnersearch.aspx?cid=1802290\u0026pcs=1\u0026hid=179078

Adelphi Suites Bangkok
https://www.agoda.com/partners/partnersearch.aspx?pcs=1\u0026cid=1802290\u0026hid=90767
The Promenade Hotel
https://www.agoda.com/partners/partnersearch.aspx?pcs=1\u0026cid=1802290\u0026hid=544709
Hostel @8
https://www.agoda.com/partners/partnersearch.aspx?pcs=1\u0026cid=1802290\u0026hid=808704
Hopeland Hotel
https://www.agoda.com/partners/partnersearch.aspx?pcs=1\u0026cid=1802290\u0026hid=1400241
Grand Swiss Hotel
https://www.agoda.com/partners/partnersearch.aspx?pcs=1\u0026cid=1802290\u0026hid=546811

Link(s)
Web Courses Bangkok
1028/5 Pongamorn Building, Rama 4, Thung Maha Mek, Sathorn, Bangkok 10120
https://www.webcoursesbangkok.com/

Music Link(s)
FreeBackgroundMusic Cynthesize New Age https://youtu.be/b7Jrspzzrgk

Dan About Thailand
https://danaboutthailand.com/
https://www.youtube.com/channel/UCpunT9lnZUEOuugdIkE368g

นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูเพิ่มเติม

Web Design Course HTML CSS Bangkok Thailand

Thiết Kế Web Bằng HTML CSS – Phần 1 Menu


Thiết Kế 1 Website Bán Áo Bằng HTML CSS Cơ Bản

Thiết Kế Web Bằng HTML CSS - Phần 1 Menu

Thực Tế Máy Kích Cá 8 Fet Đánh Bầy Cá khủng Nổi Như Phao | 0333084930 | Kích Cá Cao Lãnh


thưc tế máy 8 fet cá siêu nỗi đánh được bầy cá khủng lh 0333084930
Chào các bạn nếu có nhu cầu mua kích cá đánh bộ đánh thuyền thì gọi 0333084930 mình tư vấn các kiểu luôn nha cảm ơn các bạn đã xem video.
máy kich đien tử
kíchcácaolãnh
8fet

Thực Tế Máy Kích Cá 8 Fet Đánh Bầy Cá khủng Nổi Như Phao | 0333084930 | Kích Cá Cao Lãnh

Thực hành Code giao diện Website đơn giản bằng HTML và CSS


Thực hành Code giao diện Website đơn giản bằng HTML và CSS
♥ Mua giày Sneaker tại Website: https://qcshop.vn
♥ Ảnh và file PSD: https://drive.google.com/file/d/1NQRuFvub2RTR6A4XlFpevnpPMMW3Zgl/view?usp=sharing
♥ Download code please inbox me : https://www.facebook.com/quangchien2201
Or Zalo: 0352860701
Liên hệ với mình tại :
♥ Gmail: quangchien01.it@gmail.com
♥ Facebook: https://www.facebook.com/quangchien2201
▲ Đây là kênh youtube của mình: https://goo.gl/Ny4uMJ

Thực hành Code giao diện Website đơn giản bằng HTML và CSS

Top 5 Bài Hát TikTok Chỉ Có Nghe Là Nghiện | Mood Remix, Bukan PHO Remix, Compines, Paris Boy,..


Facebook: http://www.facebook.com/trieunotsad
YouTube: https://www.youtube.com/channel/UC2WZSISHKtjwM5oTkPgn8XQ
© Bản Quyền Video By TòiLMT07
toi_lmt07

Top 5 Bài Hát TikTok Chỉ Có Nghe Là Nghiện | Mood Remix, Bukan PHO Remix, Compines, Paris Boy,..

นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูวิธีอื่นๆGeneral news

ขอบคุณที่รับชมกระทู้ครับ css thailand

Leave a Comment