Закругления Вконтакта

ArckTick · ArckTick 28.01.2012

Давайте закруглим Вконтакт!
Выкладываем сss-твики с описанием.

Внимание.
Тема временная. Как только мы закруглим все что можно закруглить, я попрошу администрацию ее удалить, а полученный код, я надеюсь, перейдет во ВкОпт, в качестве опционной функции))

Вот, что мне удалось собрать.
добавляйте, то, что не закруглили!
Но в разумных пределах)))

Всё что есть

Код:

#public_avatar img {    
    border-radius: 5px !important;
    -o-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
}


img.im_log_author_chat_thumb, .common_friends a img, img.published_by_photo, div.fl_l.thumb a img, img.feed_post_field_photo, div.fave_link_image img, .fc_msgs_wrap a.fc_msgs_author img.fc_msgs_author, table.like_stats a img, img.feedback_group_photo, img.blst_img, .published_by_photo img, .im_friend img, table.flist_cell td.flist_item_img img, img.settings_bl_photo {
    border-radius: 2px !important;
    -o-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
}

.im_tab, .im_photo_holder a img, .dialogs_photo a img, td.image a img, img.reply_image, a.fw_post_thumb img, a.fw_reply_thumb img, a.ava img, div.fl_l.pv_thumb a img, div.gift_thumb a img, .mv_thumb a img, img.apps_wide_img, .mail_photo a img, div.people_cell a img, div.event_block a img, img.feedback_row_photo, a.bp_thumb img, .wdd_imgs img, .post_image img, .bd_day_events a img {
    border-radius: 3px !important;
    -o-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
}

#mv_box, div.fave_face_name, .feedback_reply_row_wrap, .feedback_reply_row, .wall_module a img, div.user_block a img, div.fl_l.group_row_photo a img, div.mail_envelope_photo a img, a.fave_user_image img, a.fave_face img, div.feed_friend_image a img, div.photo .bg_img img {
    border-radius: 4px !important;
    -o-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
}

.module_header .header_top, #pv_photo img, #profile_avatar img, #group_avatar img, .content a img {
    border-radius: 5px !important;
    -o-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
}




/*Закругление некоторых кнопок*/
#photos_album_area, #photos_album_area:hover, .side_filter, .button_blue button, a.profile_info_link, a.group_wiki_hider, 
.button_blue, .button_gray button, .button_gray, #side_bar ol li a:hover {
border-radius: 7px !important;
-o-border-radius: 7px !important;
-moz-border-radius: 7px !important;
-webkit-border-radius: 7px !important;
 }

/* Закругление блоков на профиле*/ 
 .module_header .header_top {
    border-radius: 5px !important;
    -o-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
}
.module_header {
    background-color: transparent !important;
}





/*Закругление меню и полей ввода данных*/
.replies_open, #feed_summary_wrap, #vk-cat-controls, #header, #friends .search, .video_search, .audio_search, #im_bar, #mail_bar, .groups_list_search, .events_list_search, #feed_bar, .fave_search, .summary_tabs, .app_search, .docs_search_bar, #settings_bl_bar, .search_query_wrap, .feed_bar, .wr_header, #mv_comments_header, #pv_comments_header, .wall_module .reply_fakebox, .reply_field_wrap, .group_wiki_hider, a.profile_info_link, .selector_dropdown, .selector_table, #profile_editor, .selector, #page_body, #editor, .events_list_search, input.text, input.search, textarea, input.big_text, #wrap1, #wrap2, #wrap3, .summary_tabs , .audio_search, .video_search, #header, #header_wrap1, .video_layout .side_panel, .full_wall_tabs, .t_bar,  .settings_view_as_text, #friends .side_panel, #friends #s_search, #main_feed .feed_post_field_wrap #submit_post_box textarea#post_field, .wall_module .mention_rich_ta, .left_box, #settings_panel, .audio_table .side_panel, #profile, .wall_module .reply_fakebox, .reply_field_wrap {
border-radius: 8px !important;
-o-border-radius: 8px !important;
-moz-border-radius: 8px !important;
-webkit-border-radius: 8px !important;
 }

Так.. Теперь давайте всё это отструктурируем:

Закругление аватарок

Редактируется

Закругление фотографий

Редактируется

Закругление заголовков

Редактируется

Закругление кнопок

Редактируется

Закругление полей меню

Редактируется

Закругление прочих элементов

Код:

/* Закругления сердечек*/ 
div.post_like:hover, div.post_like_link:hover, div.post_like_wrap:hover, .fw_like_wrap:hover, #mv_like_wrap:hover, #pv_like_wrap:hover {
      border-radius: 5px !important;
    -o-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
}
/* Закругления сердечек комментариев*/ 
div.like:hover, div.like_link:hover, div.like_wrap:hover {
      border-radius: 5px !important;
    -o-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
}

Саша Толмачёв · Саша Толмачёв 03.04.2014

/* Закругление своей аватарки в диалогах */

.im_photo_holder a img, .dialogs_photo a img, td.image a img, img.reply_image, a.fw_post_thumb img, a.fw_reply_thumb img, a.ava img, div.fl_l.pv_thumb a img, div.gift_thumb a img, .mv_thumb a img, img.apps_wide_img, .mail_photo a img, img {
border-radius: 10px !important;
-o-border-radius: 10px !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
}

#public_avatar img {
border-radius: 15px !important;
-o-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}

/* Закругление аватарок друзей в диалогах */

img.im_log_author_chat_thumb, .common_friends a img, img.published_by_photo, div.fl_l.thumb a img, img.feed_post_field_photo, div.fave_link_image img, .fc_msgs_wrap a.fc_msgs_author img.fc_msgs_author, table.like_stats a img, img.feedback_group_photo, img.blst_img, .published_by_photo img, .im_friend img, table.flist_cell td.flist_item_img img, img.settings_bl_photo {
border-radius: 12px !important;
-o-border-radius: 12px !important;
-moz-border-radius: 12px !important;
-webkit-border-radius: 12px !important;
}

/* Закругления друзей на страничке */

.im_tab, .im_photo_holder a img, .dialogs_photo a img, td.image a img, img.reply_image, a.fw_post_thumb img, a.fw_reply_thumb img, a.ava img, div.fl_l.pv_thumb a img, div.gift_thumb a img, .mv_thumb a img, img.apps_wide_img, .mail_photo a img, div.people_cell a img, div.event_block a img, img.feedback_row_photo, a.bp_thumb img, .wdd_imgs img, .post_image img, .bd_day_events a img {
border-radius: 13px !important;
-o-border-radius: 13px !important;
-moz-border-radius: 13px !important;
-webkit-border-radius: 13px !important;
}

/* Закругления фоток и видео на странице */

#mv_box, div.fave_face_name, .feedback_reply_row_wrap, .feedback_reply_row, .wall_module a img, div.user_block a img, div.fl_l.group_row_photo a img, div.mail_envelope_photo a img, a.fave_user_image img, a.fave_face img, div.feed_friend_image a img, div.photo .bg_img img {
border-radius: 14px !important;
-o-border-radius: 14px !important;
-moz-border-radius: 14px !important;
-webkit-border-radius: 14px !important;
}

/* Закругление аватарок в поиске */

.module_header .header_top, #pv_photo img, #profile_avatar img, #group_avatar img, .content a img {
border-radius: 15px !important;
-o-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}

/*Закругление некоторых кнопок*/
#photos_album_area, #photos_album_area:hover, .side_filter, .button_blue button, a.profile_info_link, a.group_wiki_hider,
.button_blue, .button_gray button, .button_gray, #side_bar ol li a:hover {
border-radius: 17px !important;
-o-border-radius: 17px !important;
-moz-border-radius: 17px !important;
-webkit-border-radius: 17px !important;
}

/* Закругление блоков на профиле*/
.module_header .header_top {
border-radius: 15px !important;
-o-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}
.module_header {
background-color: transparent !important;
}

/*Закругление меню и полей ввода данных*/
.replies_open, #feed_summary_wrap, #vk-cat-controls, #header, #friends .search, .video_search, .audio_search, #im_bar, #mail_bar, .groups_list_search, .events_list_search, #feed_bar, .fave_search, .summary_tabs, .app_search, .docs_search_bar, #settings_bl_bar, .search_query_wrap, .feed_bar, .wr_header, #mv_comments_header, #pv_comments_header, .wall_module .reply_fakebox, .reply_field_wrap, .group_wiki_hider, a.profile_info_link, .selector_dropdown, .selector_table, #profile_editor, .selector, #page_body, #editor, .events_list_search, input.text, input.search, textarea, input.big_text, #wrap1, #wrap2, #wrap3, .summary_tabs , .audio_search, .video_search, #header, #header_wrap1, .video_layout .side_panel, .full_wall_tabs, .t_bar, .settings_view_as_text, #friends .side_panel, #friends #s_search, #main_feed .feed_post_field_wrap #submit_post_box textarea#post_field, .wall_module .mention_rich_ta, .left_box, #settings_panel, .audio_table .side_panel, #profile, .wall_module .reply_fakebox, .reply_field_wrap {
border-radius: 8px !important;
-o-border-radius: 8px !important;
-moz-border-radius: 8px !important;
-webkit-border-radius: 8px !important;
}

/* Закругления сердечек*/
div.post_like:hover, div.post_like_link:hover, div.post_like_wrap:hover, .fw_like_wrap:hover, #mv_like_wrap:hover, #pv_like_wrap:hover {
border-radius: 30px !important;
-o-border-radius: 30px !important;
-moz-border-radius: 30px !important;
-webkit-border-radius: 30px !important;
}

/* Закругления сердечек комментариев*/
div.like:hover, div.like_link:hover, div.like_wrap:hover {
border-radius: 15px !important;
-o-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}

/*Закругление некоторых кнопок*/
.button_blue button, .button_blue, .button_gray button, .button_gray {
border-radius: 17px !important;
-o-border-radius: 17px !important;
-moz-border-radius: 17px !important;
-webkit-border-radius: 17px !important;
}

/*Закругление некоторых кнопок в настройках*/
.side_filter, .button_blue button, .button_blue, .button_gray button, .button_gray, #side_bar ol li a:hover {
border-radius: 17px !important;
-o-border-radius: 17px !important;
-moz-border-radius: 17px !important;
-webkit-border-radius: 17px !important;
}

/*Закругление меню и полей ввода данных*/
.group_wiki_hider, a.profile_info_link, .selector_dropdown, .selector_table, #profile_editor, .selector, #page_body, #editor, .events_list_search, input.text, input.search, textarea, input.big_text, #wrap1, #wrap2, #wrap3, .summary_tabs , .audio_search, .video_search, #header, #header_wrap1, .video_layout .side_panel, .full_wall_tabs, .t_bar, .settings_view_as_text, #friends .side_panel, #friends #s_search, #main_feed .feed_post_field_wrap #submit_post_box textarea#post_field, .wall_module .mention_rich_ta, .left_box, #settings_panel, .audio_table .side_panel, #profile, .wall_module .reply_fakebox, .reply_field_wrap {
border-radius: 15px !important;
-o-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}

/*Закругление меню и некоторых блоков*/
input.text, input.search, textarea, input.big_text, #wrap1, #wrap2, .summary_tabs , .audio_search, .video_search, #header, #header_wrap1, .video_layout .side_panel, .full_wall_tabs, .t_bar, .settings_view_as_text, #friends .side_panel, #friends #s_search, #main_feed .feed_post_field_wrap #submit_post_box textarea#post_field, .wall_module .mention_rich_ta, .left_box, #settings_panel, .audio_table .side_panel, #profile, .wall_module .reply_fakebox, .reply_field_wrap, .events_list_search {
border-radius: 15px !important;
-o-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}

/*Закругление меню и некоторых блоков*/
input.text, input.search, textarea, input.big_text, #wrap1, #wrap2, .summary_tabs , .audio_search, .video_search, #header, #header_wrap1, .video_layout .side_panel, .full_wall_tabs, .t_bar, .settings_view_as_text, #friends .side_panel, #friends #s_search, #main_feed .feed_post_field_wrap #submit_post_box textarea#post_field, .wall_module .mention_rich_ta, .left_box, #settings_panel, .audio_table .side_panel, #profile, .wall_module .reply_fakebox, .reply_field_wrap, .events_list_search {
border-radius: 15px !important;
-o-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}

Саша Толмачёв · Саша Толмачёв 03.04.2014

Что за тупость? Зачем эти коды смайлы закругляют?!!!

**Вэлл** · **Вэлл** 03.04.2014

Саша Толмачёв, они писались когда ещё смайлов в ВК небыло...

Саша Толмачёв · Саша Толмачёв 04.04.2014

Цитата:

Сообщение от Вэлл

Саша Толмачёв, они писались когда ещё смайлов в ВК небыло...

Тут вообще никто не сидит и не редактирует css, Я под себя настроил конечно, но там недочёты есть-а я не программист, чтоб уметь исправлять. Кто хорошо владеет css? Может переделаете весь интерфейс закруглённым? И поставите ползунок в вкопте, чтоб можно былы его дальше продвигая-увеличивать закруглённость. Такое ведь возможно?) И не говорите, что нет. Сейчас нет ничего невозможного. Просто это сложно сделать-я не тороплюсь. Лишь подал идею) Спасибо)

SkyLoKi · SkyLoKi 24.06.2014

А я думал что flat в моде у веб-разработчиков сейчас, и делают все квадратное )
Ну хотя ладно, не все flat ui любят )

klik · klik 06.11.2014

Привет.
А можно сделать закругления для кнопок добавления в друзья, вступления в группы и отправки сообщений в диалогах и комментариях такими же овальными, как кнопки вступления в паблики?

Алексей Любимов · Алексей Любимов 10.12.2014

Скажите, а как наоборот отключить все закругления vk? в частности верхней плашки (хидера)?

verazub · verazub 11.12.2014

Цитата:

Сообщение от Алексей Любимов

Скажите, а как наоборот отключить все закругления vk? в частности верхней плашки (хидера)?

в хидере, это картинка, надо перерисовать. Если бы ты конкретно назвал что надо сделать не закругленным и сделал скриншот + показал мастер paintа то я бы тебе с радостью помог