Yarım xarakterli CSS-ə müraciət edə bilərəmmi?

Nə axtarıram:

Bir xarakterin yarısını stilize etmək üçün bir yol. (Bu halda yarım məktub şəffaf olacaq)

Aradığım və çalışdığım şey (Şans olmadan):

  • Yarım xarakter / yazı üsulları
  • CSS və ya JavaScript istifadə edərək bir xarakterin bir hissəsini tərtib edir
  • CSS-in% 50-ə yaxın xarakterinə tətbiq edin

Aşağıda əldə etməyə çalışdığım bir nümunədir.

2019

2556
09 мая '14 в 19:16 2014-05-09 19:16 Mathew MacLean 09 may '14 saat 19:16 'da soruşdu 2014-05-09 19:16
@ 1 cavab

( JSFiddle demosu )


Part 2. Ətraflı Çözüm - Müstəqil Sol və sağ hissələr

2019

( JSFiddle demosu )


border=0
border=0

3-cü hissə: Mix və təkmilləşdirin

İndi mümkün olanları bilirik ki, bir neçə variant yaradın.


border=0

-Harizontal yarım ədəd

  • Mətn kölgəsi olmadan:

    2019

( JSFiddle demosu )


border=0
border=0

-Vertik 1/3 hissə

  • Mətn kölgəsi olmadan:

    2019

( JSFiddle demosu )


border=0
border=0

-Horizontal 1/3 hissə

( JSFiddle demosu )


border=0
border=0

@KevinGranger tərəfindən HalfStyle Enhancement

2019

( JSFiddle demosu )


border=0
border=0

@SamTremaine ilə PingingStyle HalfStyle genişləndirilməsi

2019

( JSFiddle demosamtremaine.co.uk )


border=0
border=0

Part 4: İstehsala hazırdır

Half-Style üslubunda fərdiləşdirilə bilən müxtəlif stil dəstləri istənilən elementlər üçün bir səhifədə istifadə edilə bilər. Bir neçə üslubu müəyyənləşdirə və birindən istifadə edən pluginə danışa bilərsiniz.

Plugin, hədəf elementlərdəki data atribut data-HalfStyle="[-CustomClassName-]" edir .textToHalfStyle və avtomatik olaraq bütün lazımi dəyişiklikləri edir.

Belə ki, yalnız mətni olan elementə textToHalfStyledata-HalfStyle="[-CustomClassName-]" atributu data-HalfStyle="[-CustomClassName-]" . Plitə işin qalan hissəsini edəcəyik.

2019

( JSFiddle demosu )

2743
09 мая '14 в 19:42 2014-05-09 19:42 Cavab Arbel May 09, '14 də 19:42 'də verildi 2014-05-09 19:42

2019

466
09 мая '14 в 19:32 2014-05-09 19:32 Cavab Razvan Balosin tərəfindən 09.05.2014 19:32 2014-05-09 19:32

Edit (Oktyabr 2017): background-clip və ya əksinə, background-image options indi bütün əsas brauzerlər tərəfindən dəstəklənir: CanIUse

Bəli, yalnız bir xarakterlə və yalnız CSS ilə edə bilərsiniz.

Webkit yalnız (və Chrome):

http://jsbin.com/rexoyice/1/

 <h1>X</h1> 

Vizual olaraq, iki simvol (JS, CSS pseudo-elementləri və ya yalnız HTML vasitəsilə) istifadə edən bütün nümunələr yaxşı görünür, lakin bütün DOM-a məzmunu əlavə edir, bu, əlçatanlığa səbəb ola bilər və mətni seç / kəsdir / yapışdırın .

211
Cavab DA. 2014-05-09 19:42 May 09 '14 də 19:42 2014-05-09 19:42

2019

146
09 мая '14 в 19:33 2014-05-09 19:33 Cavab verilir wvandaal May 09 '14 19:33 2014-05-09 19:33

Bəlkə də əhəmiyyətsiz ola bilər, amma bir dəfə eyni şeyi yapan bir jQuery funksiyası yaratdıq, ancaq yatay olaraq.

Mən bunu "şerit" + "mətn", demo üçün "Strippex" adlandırdım: http://cdpn.io/FcIBg

Deyirəm ki, bu, hər hansı bir problemin həllidir, amma artıq CSS-ni yarım xarakterə tətbiq etməyə çalışdım, lakin yatay olaraq. Beləliklə fikir eynidır, həyata keçirilməsi qorxunc ola bilər, amma işləyir.

Və, və ən əsası, mən onu yaratmaq üçün əyləncəli idi!

2019

92
13 мая '14 в 14:05 2014-05-13 14:05 Cavab LukyVj tərəfindən 13 May 'da 14:05' də veriləcək 2014-05-13 14:05

Burada kətan üzərində çirkin bir tətbiq var. Mən bu həllini sınamışam, amma nəticələr gözləniləndən daha pis idi, buna görə də burada hamısı eynidır.

2019

70
09 мая '14 в 22:33 2014-05-09 22:33 Cavab HaSuKrOnOs 09 may '14 saat 10:33 pm verilir 2014-05-09 22:33

Bununla maraqlandığınız təqdirdə, Lucas Bebber Glitch çox bənzər və super sərin təsir edir:

2019

67
01 окт. Cavab verilir Ruskin 01 oktyabr. 2014-10-01 15:39 '14 at 15:39 2014-10-01 15:39

Ən yaxşısı əldə edə bilərəm:

 body{ font-family: arial; } span{ display: inline-block; overflow: hidden; } span:nth-child(2){ color: red; } 
http://jsfiddle.net/9wxfY/2/ 

Burada yalnız bir sıra istifadə edən versiyası: http://jsfiddle.net/9wxfY/4/

58
09 мая '14 в 19:28 2014-05-09 19:28 Cavab 09 may 2014 - il tarixində saat 19: 28- də Məhkum tərəfindən verilmişdir 2014-05-09 19:28

2019

53
12 мая '14 в 23:32 2014-05-12 23:32 cavab 12 May 'da 14:32 ' də Shipow tərəfindən verilir . 2014-05-12 23:32

Digər bir CSS-də yalnız həll (hər hansı bir məktub xüsusi CSS yazmaq istəmirsinizsə, məlumatın atributu lazım olsa da). Şura üzərində işləyir (IE 9/10, yeni Chrome və FF tərəfindən test edilmişdir)

 <span data-char="X">X</span> 
42
12 мая '14 в 21:44 2014-05-12 21:44 Cavab MStrutt 12 may, saat 14: 44-da verilir 2014-05-12 21:44

Məhdud CSS və jQuery Solution

Mən bu həllin nə qədər zərif olacağına əmin deyiləm, amma hər şeyi yarımçıq yaradır : http://jsfiddle.net/9wxfY/11/

Əks təqdirdə, mən sizin üçün yaxşı bir həll yaratmışam ... Hamınızın HTML üçün olması lazımdır:

06/13/2016 tarixli bu ən son və dəqiq nəşrinə nəzər salın: http://jsfiddle.net/9wxfY/43/

CSS-nə gəldikdə, çox məhduddur ... yalnız onu tətbiq etmək lazımdır :nth-child(even)

 .half-color span{ font-size: 2em; display: inline-block; overflow: hidden; } .half-color span:nth-child(even){ color: red; } 
36
09 мая '14 в 19:39 2014-05-09 19:39 Cavab verilir Adjit May 09, '14 19:39 2014-05-09 19:39
 .halfStyle { position:relative; display:inline-block; font-size:68px;  color: rgba(0,0,0,0.8);  overflow:hidden; white-space: pre;  transform:rotate(4deg); -webkit-transform:rotate(4deg); text-shadow:2px 1px 3px rgba(0,0,0,0.3); } .halfStyle:before { display:block; z-index:1; position:absolute; top:-0.5px; left:-3px; width: 100%; content: attr(data-content);  overflow:hidden; color: white; transform:rotate(-4deg); -webkit-transform:rotate(-4deg); text-shadow:0 0 1px black; } 

http://experimental.samtremaine.co.uk/half-style/

Вы можете ломать этот код, делая всевозможные интересные вещи - это всего лишь одна реализация моей связи, и я придумал прошлую ночь.

29
ответ дан Sam Tremaine 13 мая '14 в 12:26 2014-05-13 12:26

Хорошее решение для WebKit, использующее поддержку background-clip: text : http://jsfiddle.net/sandro_paganotti/wLkVt/

 span{ font-size: 100px; background: linear-gradient(to right, black, black 50%, grey 50%, grey); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 
24
ответ дан Sandro Paganotti 09 мая '14 в 20:50 2014-05-09 20:50

FWIW, здесь я беру на себя это только с помощью CSS: http://codepen.io/ricardozea/pen/uFbts/

Bir neçə qeyd:

  • Основная причина, по которой я это делал, - проверить себя и посмотреть, удалось ли мне выполнить стилизацию половины персонажа, фактически предоставляя содержательный ответ OP.

  • Я знаю, что это не идеальное или наиболее масштабируемое решение, а предлагаемые здесь люди гораздо лучше подходят для сценариев "реального мира".

  • Созданный мной CSS-код основан на первых мыслях, которые приходят мне на ум и моем личном подходе к проблеме.

  • Мое решение работает только на симметричных символах, таких как X, A, O, M. ** Оно не работает на асимметричных символах, таких как буквы B, C, F, K или строчные буквы.

    /li >
  • ** ОДНАКО, этот подход создает очень интересные "фигуры" с асимметричными символами. Попробуйте изменить X на K или на строчную букву, такую ​​как h или p в CSS:)

HTML

 <span class="half-letter"></span> 

SCSS

 .half-character { display: inline-block; font: bold 350px/.8 Arial; position: relative;   { content: 'X'; //Change character here display: inline-block; width: 50%; overflow: hidden; color: #7db9e8; }  { position: absolute; top: 0; left: 50%; color: #1e5799; transform: rotateY(-180deg); } } 
22
ответ дан Ricardo Zea 16 мая '14 в 23:21 2014-05-16 23:21

Как насчет чего-то подобного для более короткого текста?

Это может даже работать для более длинного текста, если вы делаете что-то с циклом, повторяя символы с помощью JavaScript. В любом случае, результат будет примерно таким:

2019

ответ дан Alireza 19 июня '17 в 15:58 2017-06-19 15:58

Вы также можете сделать это с помощью SVG, если хотите:

 <svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <defs id="FooDefs"> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="50%" stop-color="blue" /> <stop offset="50%" stop-color="red" /> </linearGradient> </defs> <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text> </svg> <h1>This is not a solution X</h1> 

http://codepen.io/nicbell/pen/jGcbq

16
ответ дан Nic Bell 15 мая '14 в 16:26 2014-05-15 16:26

Это может быть достигнуто с помощью селектора CSS :before и content property value .

 <div class="halfed"> X </div> <div class="halfed1"> X </div> 

→ Посмотрите на jsFiddle

14
ответ дан Sleek Geek 14 янв. '16 в 17:41 2016-01-14 17:41

Вы можете использовать приведенный ниже код. Здесь, в этом примере, я использовал тег h1 и добавил атрибут data-title-text="Display Text" который будет отображаться с текстом другого цвета в текстовом элементе тега h1 , что дает эффект полуцветного текста, как показано в примере ниже

2019

ответ дан GSB 04 мая '17 в 8:44 2017-05-04 08:44

Просто для записи в истории!

Я придумал решение для моей собственной работы 5-6 лет назад, а именно Gradext (чистый javascript и чистый css, без зависимости).

Техническое объяснение состоит в том, что вы можете создать такой элемент:

 <span>A</span> 

теперь, если вы хотите создать градиент для текста, вам нужно создать несколько слоев, каждый из которых будет индивидуально окрашен, а созданный спектр будет иллюстрировать эффект градиента.

например, посмотрите на это слово lorem внутри <span> и вызовет эффект горизонтального градиента ( посмотрите примеры ):

  <span data-i="0" style="color: rgb(153, 51, 34);">L</span> <span data-i="1" style="color: rgb(154, 52, 35);">o</span> <span data-i="2" style="color: rgb(155, 53, 36);">r</span> <span data-i="3" style="color: rgb(156, 55, 38);">e</span> <span data-i="4" style="color: rgb(157, 56, 39);">m</span> 

и вы можете продолжать делать этот шаблон в течение длительного времени, а также длинный абзац.

2019

ответ дан mrReiha 15 дек. '18 в 18:26 2018-12-15 18:26

Другие вопросы по меткам или Задайте вопрос