Заобля на поле при IE

S

sentenello

Registered
Здравейте,
в момента ползвам този код
Код: 
-moz-border-radius:3px 3px 3px 3px;
Но с него ми заобля само под Mozilla и Chrome (само там съм тествал). При IE би трябвало да е друг css кода. Ако може да ме светнете :D
 
Проблема е че всеки ден се качват нови картинки което означава всеки ден да заоблям по 20-30 картинки примерно :D Затова търся друг вариант
 
За щастие вече заоблени ъгли могат да се правят под всички браузъри само с css. Магията която кара IE 6-8 да изкарва заоблените ъгли се нарича css3pie

1. Сваляш си файловете и ги разархивираш. Ще ти трябва само PIE.htc (него го слагаш в главната директория на сайта ти)

2. Пишеш:

.rounded {
border: 1px solid red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(PIE.htc);
}

3. <div class="rounded">Hello</div>

4. Заоблени ъгли под всички съвременни браузъри :)


css3pie дава възможност да се ползват много от новите възможности на css3 дори в по-старите версии на IE, за които досега това беше илюзия.
Градиенти, няколко фона на един елемент, сенки на елементите и за повече инфо можеш да видиш документацията им :)
 
adrian каза:
За щастие вече заоблени ъгли могат да се правят под всички браузъри само с css. Магията която кара IE 6-8 да изкарва заоблените ъгли се нарича css3pie

1. Сваляш си файловете и ги разархивираш. Ще ти трябва само PIE.htc (него го слагаш в главната директория на сайта ти)

2. Пишеш:

.rounded {
border: 1px solid red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(PIE.htc);
}

3. <div class="rounded">Hello</div>

4. Заоблени ъгли под всички съвременни браузъри :)


css3pie дава възможност да се ползват много от новите възможности на css3 дори в по-старите версии на IE, за които досега това беше илюзия.
Градиенти, няколко фона на един елемент, сенки на елементите и за повече инфо можеш да видиш документацията им :)
Увеличете...

Ползваш ли го често? Как влияе на скоростта на зареждане на страницата?
 
Не съм го ползвал в проект, защото сега нямам такъв, но не мисля, че ще товари повече от хиляда картинки за направата на градиенти и заоблени ъгли :)

Иначе съм го пробвал в примерни скрипчета и си работи идеално (но пак казвам за скоростта няма как да кажа със сигурност)

Все пак обаче файлът е едва 30кб, което не е кой знае колко като се замислиш колко картинки ти спестява :)
 
adrian каза:
Не съм го ползвал в проект, защото сега нямам такъв, но не мисля, че ще товари повече от хиляда картинки за направата на градиенти и заоблени ъгли :)

Иначе съм го пробвал в примерни скрипчета и си работи идеално (но пак казвам за скоростта няма как да кажа със сигурност)

Все пак обаче файлът е едва 30кб, което не е кой знае колко като се замислиш колко картинки ти спестява :)
Увеличете...

Е не съм много съгласен с теб. Хиляда картинки ако ги правиш ти ясно, че за теб ще е по-добре кода, ако имам 2 картинки за целия сайт, така наречените спрайтове и сложа кода , а както знаеш джаваскрипта прегенерира елементите и се забавя е тогава вече е по-добре с картинки :)
Затова питах дали си го тествал :) Все пак на един сайт е важна и скоростта на зареждане
 
Аз вече гледам да се възползвам максимално от css 3 така че мен css3pie си ме устройва идеално. Въпреки че дори бих предпочел в IE да няма заоблени ъгли, но да си използвам css 3. :) Въпрос на личен избор е, просто ми писна да си играя да режа с photoshop :) А и къде къде по-бързо е да напишеш три реда код и да имаш градиенти и още три реда код за заоблени ъгли, отколкото да си играеш да режеш в photoshop :)
 
То на всеки му е лесно така и предпочита 3-те реда код, но понякога клента го иска еднакво и в ИЕ ;)
 
Като заприказвахте за тва :
Кой е най лесния и все пак правилен начин да се оеднаквят ЦСС за ИЕ-браузъра и за Лисицата например ??

Благодаря за вниманиет и весели празници.
 
sthterev, точно тогава идва на помощ css3pie :) Иначе имах един дизайн, който не приеха нито един от предложените начини за направата освен картинките... и за мое най-голямо съжаление всеки бокс беше освен че с различна широчина, височина, но и различен бордер... тогава си падна яко рязане :)

svet1bg, предполагам искаш да кажеш оеднаквяване на изгледа под IE и Mozilla?
Най-важното е да знаеш кое свойство и най-вече защо да използваш когато го кодираш. Другото, което лично според мен адски много улеснява работата е използването на css reset.

И да, понякога ти трябва да зададеш дадено свойство само за IE 7 примерно. Тогава открих един метод, който премахва необходимостта от използване на css хакове, който обикновено не минават валидацията:

в html документа, заменяш тага <html> с:

<html lang="en">
Увеличете...

Оставил съм коментар с линкът, откъдето е взет кода. Така ако искаш дадено свойство да важи само за IE 6 правиш така:

.myClass { color: blue; }
.ie6 myClass { color: red; }

И така текстът за IE 6 няма да е син, а червен (примерът е без никаква практическа полза, но показва изключително полезния метод.)
 
аз преди си мислех за нещо - прави се една картинка с заоблени ъгли като извън ъглите е цвят на страницата примерно #8a94ff, вътре в самата картинка се поставя transparent и когато искаш да сложиш на някоя картинка заоблени ъгли си правиш див:
<div style="background:url('tyka kartinka')no-repeat;width:XX px;height:XX px;"><img src="картинката с заоблените ъгли"></div>
Увеличете...

никога не съм го пробвал, ако някой го е пробал може да сподели..
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе